Adobe

decor

Web Platform Team Blog

Making the web awesome

Better SVG for a better web

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.
  • Easy to style and script by default: while SVG supports multiple ways to achieve the same visual result, some of them are less friendly to subsequent CSS and JavaScript coding. For instance, a element positioned using a transform matrix() function is harder to re-position or animate from CSS or JavaScript than if it were positioned using the x and y attributes. Other potential work in this area includes improving the conversion of object or layer names to IDs, as well as generating more reusable style rules applicable using CSS classes.
  • 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.

2 Comments

  1. January 30, 2014 at 12:42 am, John Nack on Adobe : Feedback, please: SVG in Photoshop said:

    […] animation tool, LiveMotion.) The company keeps pressing forward with improvements, as detailed in this post from the Web platform […]

  2. February 08, 2014 at 11:48 am, Julien Goy said:

    I’ld really like to see a better support for SVG in Dreamweaver (but the latest version needs so much fixes before). Even some code/tutorials posted by people at adobe about how to take the best of AI and DW with SVG could be more than interesting. Keep me posted if something like this emerges.