Quick Tip: Saving SVG Files in Adobe Illustrator

Mat Helme
writes on May 16, 2013

What’s an SVG, and why do I have to use it? SVG, or Scalable Vector Graphics, are very small in file size and are great for retina displays. Vector graphics have an advantage over pixel formats like .gif or .jpg as they don’t deal with resolution. SVGs can scale to any size and not lose clarity. All SVGs are usually smaller in file size than raster graphics.

Treehouse Illustrator teacher Mat Helme will help you get started saving resolution independent SVG files in this Treehouse Quick Tip.

4 Responses to “Quick Tip: Saving SVG Files in Adobe Illustrator”

Laura M on November 1, 2017 at 3:25 pm said:

This didn’t work for me. It generated an image but gave me non-SVG code, beginning as shown here:

<image overflow="visible" width="70" height="70" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABGCAYAAABxLuKEAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJ bWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdp bj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6 eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0 NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJo
Eric on October 9, 2015 at 12:27 pm said:

Clear and concise. Nice tutorial and easy to follow.
romney on August 9, 2013 at 7:11 am said:

Great tutorial. Much simpler than I was shown how to do it by a colleague. Thanks!
Dariusz Goldmann on June 22, 2013 at 8:46 am said:

that’s good one:)

LearnQuick Tip: Saving SVG Files in Adobe Illustrator

4 Responses to “Quick Tip: Saving SVG Files in Adobe Illustrator”

Learning to code can be fun!

With a starting salary of up to $75,000 per year, working in tech isn’t a job — it’s a career.