Adobe Illustrator CC

How to use Illustrator to create CSS-based web graphics

Create websites faster. Let Illustrator generate CSS and SVG code for your artwork. (Try it, 4 min)

FromRufus Deuchler

What do I need?

Get files Sample files to practice with (ZIP, 318 KB)

Get PDF Illustrator cheat sheet

You can create websites faster if you let Illustrator generate the CSS code for your artwork. Watch how you can copy and paste this code right into your web editor; and export scalable, responsive SVG files that can adapt to different screen sizes and resolutions.

Export code options (0:30); Copy CSS styles (1:22); Save styles to a CSS file (1:59); Copy/paste SVG (2:00); Save as Responsive SVG (2:32)

Let us know what you think

That's it! You're done. Please provide feedback in our survey so that we can make sure this tutorial is as useful as possible.

rufus-deuchler_83x83

Rufus Deuchler

Rufus is Senior Worldwide Design Evangelist at Adobe Systems with an affinity for creative technology. He delivers comprehensive product presentations to audiences large and small across the globe.