While working on the TunedIn web App i came across an issue with SVG.
As we want to be retina ready and be able to easily switch colors of icons. We decided to use SVG for our icons. This worked well as SVG is nicely embeddable into HTML.
By using the svg.whateverClass { fill: #fff; } css property you can change the color of the icon or add shadows and stroke colors.
This worked all nicely until i had a lot of elements repeating the same SVG icons. I use chrome as my development browser (which is quite fast) so it took a while for me to notice. But as i tested in safari scrolling of many elements became heavily slow!
I checked if there were to many events or the retina sized images of the items were the cause, until i removed the SVG rating icons… and bam! everything was super fast again!
The problem was also actually the amount of SVG vectors the browser had to render. The more elements there are, the more slow you website will get.
The follwing graphic show pretty good how the number of SVG elements will drain performance exponentially.
As i used the same icon over an over again i thought i can reuse the SVG using the <defs> and <use> tags.
I stored the SVG in an hidden container before the closing </body> tag and defined all icons inside the <defs> tag like this:
(yes you can reuse them before you define them)
<!-- use the icon somewhere in your website -->
<svg viewBox="0 0 1000 1000" version="1.1">
<use x="0" y="0" xlink:href="#icon1"/>
</svg>
...
<svg viewBox="0 0 1000 1000" version="1.1">
<use x="0" y="0" xlink:href="#icon2"/>
</svg>
...
<!-- define the icons -->
<div class="svgContainer" style="display: none">
<svg viewBox="0 0 1000 1000" version="1.1">
<defs>
<g id="icon1">
<circle id = "s1" cx = "200" cy = "200" r = "200" fill = "yellow" stroke = "black" stroke-width = "3"/>
</g>
<g id="icon2">
<ellipse id = "s2" cx = "200" cy = "150" rx = "200" ry = "150" fill = "salmon" stroke = "black" stroke-width = "3"/>
</g>
</defs>
</svg>
</div>
</body>
but even this, didn’t made the site faster, but i think its a better way to reuse SVG icons as defining them over and over again.
So how to deal with this?
After trying for hours to write the SVG icons on-the-fly to a canvas element, i came back to @font-face web-fonts.
And guess what? Converting the same icons to a web font and displaying them was the solution. Now the app is fast and i still have the possibility to change the color and size of the icons on the fly, by setting the color: #fff; property!
How to transform SVG into a Web-Font?
Save your icons into several *.svg files and give them the name the icon should have. After that upload them to icomoon.io/app/ and generate you web-font.
You can also use fontcustom.com or the grunt task github.com/sapegin/grunt-webfont, but they didn’t worked with my SVG files 🙁
Image Source: http://smus.com/canvas-vs-svg-performance/
Pingback: Where are we at with SVG performance?CopyQuery CopyQuery | Question & Answer Tool for your Technical Queries,CopyQuery, ejjuit, query, copyquery, copyquery.com, android doubt, ios question, sql query, sqlite query, nodejsquery, dns query, update query()