I have a bundle of SVG components in my sprite.SVG file and an HTML page where I am including those SVG components here in HTML.
eg:
<svg class="svg-icon">
<use xlink:href="sprite.svg#hiw-svg"></use>
</svg>
Now , I want to apply javascript on the components of svg's which I included, So how should I do that, since those components are defined in sprite.svg file.
One possible solution is that I include those sprite symbols directly as svg in my html but I don't want to do that as I have lots of svg's which will take lot of space in html.
So what is is the best way I can apply GreenSock js or simply (JS) for animations on sprite.svg file.
There's a way to use javascript inside the svg when using an object tag to embed svg.
Here's an example of embedding the javascript animation inside the svg file itself.
https://codesandbox.io/s/inline-svg-javascript-with-object-iy2mq?file=/index.html
Related
I have searched the web but the answers showing embedding the SVG into the HTML using <object>, <img>, etc. What I want to do is open a large SVG file that contains lots of images, find the image I need, and show only that image on the page. How can I do that?
File structure is:
directory
index.html
script.js
images.svg
A few steps:
Use the Fetch API to get the image data.
Use a DOM parser to parse the XML into a document.
Find the SVG subset you want. (You didn't show us your XML, but this is likely as simple as document.querySelector().)
Create an SVG element. (This is actually a bit tricky due to the namespace. See also: JavaScript createElementNS and SVG)
Append it to the relevant element on your page.
hello damn i think you can add svg in your html code and run code but you cant font-size svg in css you can use width and height in svg to big font-size ok under
I have an SVG sprite file which was supplied by designers for my app. The convention they'd like me to use to render their SVG icons is to load the sprite at the top of the <body> element and then render icons like this:
<svg class="u-icon-gear-dims">
<use xlink:href="#gear"></use>
</svg>
This works when I add the SVG sprite inline, that is, plop the entire contents of the SVG sprite into my template.html file. Adding the sprite inline makes the html file ugly but, more significantly, having to manually do it raises maintainability concerns.
I'm currently referencing the individual SVGs directly to render icons, but this has performance implications as there is often a split second delay when the icon has not yet been loaded.
I found this SO topic, but there does not appear to be a viable answer.
FWIW, our app uses webpack and I'm currently trying to load the SVG sprite into a template HTML file.
How can I dynamically load an SVG sprite from a file in an HTML file?
Are you using PHP? There are methods for including SVG markup inline using backend languages.
https://sheelahb.com/blog/how-to-get-php-to-play-nicely-with-svg-files/
I'm looking for an option to bind Vue.js directives to elements in SVG. For example I have SVG image created in inkscape, key elements of this image have ids
<svg>
...
<g id="layer 1" inkscape:label="layer 1">
...
<g id="active_element1">
<img inkscape:export-filename="important_element1.png">
I was able to load SVG with vue-svg-loader as a component, but it doesn't consider what is inside SVG. I also tried to add directives to SVG in inkscape and load as plain text to tag, but then Vue needs some kind of recompile.
Is there a prettier way to get to elements inside SVG?
I recommend using anime.js, I also work with vue js and for animations use anime.jsi
I was playing around with loading images and found SvgCircus - basically it lets you develop animated SVGs. Here's an example of one I generated.
If I simply put this svg in my index.html it works fine. However if I try to use it in a React component I can only get the static image to load - no animation. I tried this using the dangerouslySetInnerHTML parameter in a span to load the raw string, and <use xlinkHref={filename}></use>, but both of these load the static image. I am new to React but my best guess is that the javascript that comes with the svg file is not loaded.
I have a work around - put the full svg on my index.html so it loads on page load and display: none it, and then when it is time to use it show it. I was wondering if I am overlooking anything or if there is a more elegant solution.
When you include html in react components, it is not 100% html. You need to rewrite DOM attributes in camel case e.g. stroke-opacity would be strokeOpacity.
I would think this would cause the animation issue.
Currently my company includes a rather large SVG sprite containing various icons in the index.html of our AngularJS web app. The main SVG is hidden by CSS and we display individual icons from the SVG by selecting them by their IDs:
<svg>
<use xlink:href="#icon-id"></use>
</svg>
We are now trying to reduce the load time of our site by splitting up the SVG and inlining the resulting parts on pages tha need them. Since we are also moving to Webpack to bundle our app, we'd like to specify dependencies for a specific SVG file in an Angular module and then have Webpack insert the content of the SVG -- possibly wrapped in a div -- into the DOM.
Is there any way of achieving this with an existing loader? I found the raw-loader which basically exports the content of our SVG. However, I don't know how to chain it with another loader that would insert into the DOM like say the style-loader does.
Any help is greatly appreciated.
Felix
Another option has come out since this question was asked: https://github.com/kisenka/svg-sprite-loader
It's like style-loader but for SVG:
Creates a single SVG sprite from a set of images.
Raster images support (PNG, JPG and GIF).
Custom sprite implementation support.
React examples are provided, and there is a config option for angular:
angularBaseWorkaround Adds workaround for issue with combination of and History API which is typical for Angular.js.
// some-component.jsx
import Icon from './icon';
import help from './images/icons/Help.svg';
<Icon glyph={help} />
I ended up writing my own webpack loader for this problem. You can install the inline-loader through npm. More info can be found at https://www.npmjs.com/package/inline-loader
Also you can use:
https://github.com/mrsum/webpack-svgstore-plugin for that
npm i webpack-svgstore-plugin --save-dev