Responsive SVGs in Adobe Illustrator
With scalable vector graphics being the future of the web, it’s no surprise that Adobe is trying to stay ahead of the pack. The still secret that you’ve always been able to export your Adobe Illustrator graphics as SVG files. However, in the latest upgrade to illustrator CC 2014, they’d added the ability to export your graphics as responsive SVGs. Before, you had to manipulate your SVG files after you exported them in order to make them behave as responsive graphics. In this brief tutorial, I’ll show you how to export your illustrator graphics as responsive SVGs.
Let’s say you have a graphic, such as a logo that you want to make into an SVG file for your website. You want your logo to scale with the device it’s being viewed on. Now, you can do that easily with Adobe Illustrator CC 2014. Let’s say you have your logo file ready, and you go to File> Save As, in a dialog box will pop up.
In this dialog box you’ll choose SVG 1.1, which is the standard for all SVG graphics. The only difference is, now you’ll need to click the more options button. Under more options, you’ll find a checkbox labeled responsive.
When you click okay you can save the file anywhere you’d like. You can open up the SVG in your browser and see its responsiveness in action. In the example above, you can see the browser at different sizes, and the rainy icon scales with it perfectly. This is a great feature to go along with all responsive websites.
Conclusion: Responsive SVGs
What do you think about responsive SVGs? I think they’re absolutely fantastic, and having the ability to export them directly from your illustrator files gives you a streamlined workflow for building crisp web graphics and beautiful websites. You have any questions about responsive SVGs? Feel free to leave your questions and thoughts in the comments section below.