Stripping down SVG Code

Question

I have created SVG code from coreldraw and want to place it inline in my HTML5 document and have a couple of queries.

1. How universal is SVG now-a-days? Any suggestions on backwards compatibility?

2. I have taken out the style data from the svg and put that into my css, I guess that's not a problem - or is it? I also added a hover rule...

.Borderline {stroke:#0099FF;stroke-width:7.45541;stroke-linejoin:round} .BorderFill1 {fill:#71C6FF} .BorderFill2 {fill:#CBEAFF} .BorderFill1:hover {fill: green; }

1. Can I remove any of the following data that is not needed. (but I want it to work and look the same)

<svg xmlns="http://www.w3.org/2000/svg" class="myimgleft" xml:space="preserve" width="100px" height="105px" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 92 97" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="Layer_x0020_1"> <metadata id="CorelCorpID_0Corel-Layer"/> <path class="BorderFill1 Borderline" d="M55 51c10,0 18,0 24,0 4,-5 9,-10 9,-15 0,-6 0,-22 0,-32l-16 14c-5,-4 -8,-6 -17,-14l0 47z"/> <path class="BorderFill2 Borderline" d="M79 51c-5,-1 -41,0 -47,0l0 -14c-8,8 -25,25 -28,28l28 28 0 -13c7,0 11,1 17,-2 6,-2 23,-21 30,-27z"/> </g> </svg>

1. Any other hints / tips that might be useful are very welcome.

Answer 1

1 MDN keeps an accurate list of compatibility per-element. Here's the list for SVG: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg

Feature Chrome Firefox (Gecko) IE Opera Safari Basic support 1.0 1.5 (1.8) 9.0 8.0 3.0.4

2 Keep the style in your SVG - it'll make it easier to swap out for other SVG images later. You want to be able to quickly update your svg. This one is more a matter of preference.

3 I wouldn't get in the habit of tweaking vector-art exported from CorelDraw by hand. You may think to run it through a minifier, but hand-tuning is almost certainly more work than it's worth.

Here's the first minifier Google gives me: http://petercollingridge.appspot.com/svg-optimiser For cases where you're not inlining, you can give .svgz (compressed svg) a shot, which will make it significantly smaller: https://graphicdesign.stackexchange.com/questions/24797/when-should-i-use-svg-or-svgz-for-my-web-graphics

4 Hmm, other tips - well good on you for using vector art on your site. Too many web devs/designers take the shortcut of doing everything in raster. While that gets you a nice looking image for a demo, in the long run it's really hurting your site. With ubiquitous tablets + phones, pinch + zoom is everywhere and your images need to scale nicely.

Personally, I've never loved the idea of inlining svg - I've always preferred saving as .svg and src-ing it like an image. I see why you are inlining it, though, as you're using some hovers.