SVG Files (Help)

[Stationery Direct]

I have never worked with .svg files before and I'm not that good with Illustrator, so just after some advice please.

So I currently have a few images that are .svg files, I have opened them up in illustrator, all good, literally made a basic change such as a change of text colour, exported back out as .svg, re-uploaded to my server and the images are displaying loads smaller than the original, where am I going wrong?

 

[Paul Murray]

Open the SVG up in a text editor and check the viewbox dimensions match those of your actual SVG.

For example width="100px" height="100px" viewBox="0 0 100 100"

Sometimes the viewBox is larger after editing which effectively scales down the shapes inside.

When you're using SVGs you should include a fall back to a transparent PNG for browsers that don't support them. The easiest way to do this is to add the SVG to the DOM like you would any other image, but add an 'onerror' attribute like so;

<img src="img/icon.svg" onerror="this.src='img/icon.png' "

There are other ways to check for errors and serve fallbacks, such as using Modernizr.js, but this is the down and dirty way.