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
Related
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
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/
Does anybody use svg as sprites in webpack projects?
When i was using gulp - I used this plugin: https://github.com/jkphl/gulp-svg-sprite
is there any good webpack replacement? i tried a lot of webpack solutions, but none of them worked with ready css output generation (like generated .svg + .css with all dimensions, positions etc)
or maybe somebody have a custom solution?
with concat svg files & generating style file
I´m new to Raphael and would like to do some basic questions on how to architect my app:
I need to draw models on a visual graphical editor and save them to files (I call them screens). At runtime, I need to load these screens and animate them from server data using Ajax.
Using SVG I can load data using this simple command:
<object id="svgobject" type="image/svg+xml" data=".\svg\svgfilename.svg"></object>
Also, on SVG, we can use some graphical visual editors and that´s all we need to built the screens. The rest if javascript code to get element ids and change their attributes at runtime based on ajax call to get server data.
As SVG is not supported on old browser, one natural choice is to go for Raphael, but I don´t know if there is visual graphic editor that support Raphael scripting language and how to save/load these scripts at runtime.
So, What would be the best approach to visual edit my models, save them to a file and load at realtime using Raphael ?
Ian's answer is one solution. The other way of doing this is to convert SVG documents to a data structure that Raphael can understand.
For relatively simple SVG images you can use svg2path. It converts SVG files (or svg from a URL) to paths that can be loaded into Raphael. From the documentation, running the following on the command line:
svg2path some.svg
generates a path file called some.path that can be loaded in Raphael (presumably using the paper.path() method).
It's available on github and npm.
You could use a plugin like https://github.com/wout/raphael-svg-import or https://github.com/jspies/raphael.serialize https://github.com/crccheck/raphael-svg-import-classic to get you started maybe. I think you may need to do some extra work to cope with groups and Raphael.
Edit to clarify, I'm not sure from your other comments what you mean by Raphael Mode from a graphic editor. You can just the graphic as a straight SVG and import. I'm not sure why there needs to support Raphael scripting.
The VectorEditorJS is a nice starting point for you.Look into editor.js to build or rebuild your own functionality over it.Here's a demo.
EDIT
The SVGEdit demo has got code to save the vector as an svg.You can look into the code.
I'm trying to render these files http://registro.soveci.com/dom_izq.svg and http://registro.soveci.com/dom_der.svg with RaphaelJS and raphael-svg-import, but somehow a path appears misplaced on the screen. If you view it with a standard compliant browser, you can see the path being rendered right, so it must be a problem with raphael-svg-import.
Can you provide me some hints??? (I'm new to SVG)
I have been experimenting with SVG for a little bit now and it's a bit of a coincidence because I just finished playing with that plugin today.
The url to a demo I have there also contains zip files in the documentation so you could experiment with these in Inkscape or any SVG editor and see if you cannot configure them to something in your project.
For what ever reason this plugin "likes" some SVG's but not others so maybe you could adapt one of the SVGs in the zip and it will probably work.
The authors know the plugin does not always work but it is gradually improving and even now I think it's possible to write compatible SVG's if you tinker with them.
If you need a facility to convert certain SVG's just to javascript you could use this.