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
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 [email protected] webfonts, Firefox, Safari and IE won’t respect them.
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.