I’ve been really interested in SVGs and the capabilities they give us for moving the web forward. Recently I came across Responsive Logos website and became intrigued how to do this to something myself. I had built a simple line drawing recently and decided that I would use it to play with this idea. SVGs are getting better support as I write this, but be aware that usually there should be a fallback in place when building with newer web technologies. Let’s practice progressive enhancement in our projects. That being said since this is just to demo the capabilities of Responsive SVGs there is not a fallback as it doesn’t make sense to have a PNG or JPEG polyfill.
I’ve built a small demo showing how to scale this particular SVG. In building this out I had to figure out where in the xml code to add classes to the SVG. Doing this requires embedding the SVG xml directly into a SVG tag in you document. Depending on the complexity or simplicity of your SVG you will have either have more or less paths to add classes. You can also add ids to the grouping areas to do some cool animation stuff but I’m not going over that here, you can watch a neat video that Chris Coyier did about SVG animations.
I haven’t perfected this by any means and I am still learning, but writing things like this help reinforce the ideas and concepts into my brain. Go ahead and check out my little demo and let me know what you think in the comments section down below! Constructive criticism is welcome, though please be nice with your comments.
