Thanks to support by all major browsers, and an increasing variety of devices and screen resolutions, SVG’s built-in responsiveness is attracting much attention and exploration. Most recently, Lonely Planet has worked on moving from icon fonts to SVG. One notable motive for the switch was the ability to style SVG with CSS. Several sites offer SVG icon libraries e.g. helveticons, thenounproject, or even maps. Others in the community explore animated line drawing, the use of SVG as a scalable sprite format and even to build web application UI.
Though SVG markup is often tweaked by hand for styling and scripting, authoring raw markup is not an effective way to build graphic design. Designers typically use graphic editors to easily define and adjust all the shapes and components of the final image. Though few editors use SVG as their core format, most of them are able to import and export it. This is the case for Adobe Illustrator, which started exporting SVG in 2000.
As more web designers consider SVG for their graphic content, Adobe wants to make sure Illustrator’s SVG support is relevant to their growing needs. The web platform team is actively working with the Illustrator team to improve the SVG we generate around a few dimensions:
- Clean, modern output: though valid, Illustrator’s output reflects an era when DOCTYPEs, for instance, were a requirement. Beyond outdated practices, some of the generated attributes or elements can sometimes be redundant. Though we do not expect optimizers such as SVGO to become unnecessary, we intend to save them some work over time.
- Better accessibility: though making SVG accessible is currently an area of evolving standardization, we can make it easier to author accessible SVG.
Our joint work has just begun but a few changes are already visible in the latest update of Illustrator CC:
- When Saving As SVG, Illustrator no longer defaults to Adobe CEF for fonts.
- The SVG code for the selected object(s) is now copied to the clipboard by default, ready to be pasted in your web editor.
- The default precision for length values is now 1 (used to be an unnecessarily precise 3).
- A new option called ‘Responsive SVG’ no longer gives your SVG image a specified width and height; this allows the image to scale to the size of its container by default.
- Last, we addressed an issue that prevented pixels from snapping to the grid when an SVG document created with Illustrator was reloaded for editing. Also, paths that snapped to the pixel grid when your SVG was viewed in browsers could look blurry in Illustrator. This was especially visible when designing small, simple high-contrast objects like icons.
We are only getting started. There is much more to come. In the meantime, we would love to hear from you. Use the comment section or ping us on Twitter at @adobeweb.