Small Things I’ve Found While Working With SVG

Here are a few little things I’ve found from working with SVG for a little while. No showstoppers here, just hoping my troubleshooting can help someone else.

Fluid SVG Height Trouble

When making SVG fluid (for some tips on how to do this, Sara Soueidan has written a great resource), you might find some issues where the height is randomly assigned in Safari on older versions of iOS or IE. You have to set the height to 100% because it’s not readjusting to the viewport width. You can’t use height: auto; because it’s not part of the SVG spec.

JS renders opacity in SVG differently from CSS

I have recently been writing the same animation in Javascript and CSS for comparison purposes.

See the Pen VelocityJS and SVG Moving Isoscape by Sarah Drasner (@sdras) on CodePen.

See CSS version >

In this particular pen, I noticed that the same 3D SVG with opacity applied the same way had a slightly different appearance. Notice that the CSS version is more like a window.



Transforms help with Performance

When moving SVG in CSS, transforms perform better than moving position with top/left or margin properties. Hardware accelerating can be achieved in CSS by applying a null transform hack to the selector before animating- transform:translate3d(0,0,0); (another blog post to come about this).

Fonts in an SVG

When using fonts inside of an SVG, convert them to outlines. Even if you are correctly importing/@font-facing webfonts, Firefox, Safari and IE won’t respect them.

Transform Origin

If you need a transform origin, use absolute values. SVG doesn’t appropriately assign transform origin in percentages in Firefox, and IE (and in Safari, it is not fluid for responsive). Alternately, you can use GSAP, as they solved the issue in their library. There is a fantastic CSS Tricks article about it.

« Previous Post
Next Post »

Leave a Reply

Latest Tweets