Exporting Assets: SVG (Scalable Vector Graphics)

Topics covered in this Photoshop for Web Design tutorial:

Exporting SVG from Photoshop, Exporting SVG from Illustrator

Exercise Preview

Exercise Overview

Photographs are pixel-based. Icons, logos, etc. are typically vector-based. In this exercise, you’ll learn how to export vectors as SVG (scalable vector graphics), which is a vector format we use in webpages. While pixel-based formats (such as JPEG) require low-res (1x) and hi-res (2x) versions, a single SVG file will display beautifully on any resolution display!

Photoshop can only export a proper SVG from native Photoshop vectors, such as those drawn with the Pen and Shape tools. Vectors that have been placed (or pasted) as a Vector Smart Object, cannot be properly exported as SVG. Those are what we most commonly use, so we typically cannot use Photoshop to create a proper SVG. We’ll have to use Adobe Illustrator instead.

Getting Started in Photoshop

1. In Photoshop, close any files you have open.
2. Go to File > Open or hit Cmd–O (Mac) or Ctrl–O (Windows).
3. Navigate to Desktop > Class Files > yourname-Photoshop for Web Class > iTastify and double–click iTastify Design Done.psd.
4. Choose View > 100%.
5. Scroll to the top left of the artboard so you can see the iTastify logo.
6. In the Layers panel, expand the nav folder.
7. Click once on the itastify-logo layer to select it.
8. In the Properties panel (Window > Properties) notice the W (Width) is 229 px. We’ll need to remember that size.

Exporting SVG from Illustrator

1. In the Layers panel, double–click the itastify-logo layer’s Smart Object thumbnail (to the left of the itastify-logo layer name).
2. If you get an alert about what to do after editing, click OK.

3. Adobe Illustrator should launch. If you get a PDF Modification warning, check Discard changes… and click OK.

   In Illustrator, you should now see the iTastify logo. Before we export the SVG, we should consider the size of the artwork. SVG files can be scaled up or down to be any size within a webpage and the quality will always be great. But it would be nice if the SVG would initially start out at the desired size when the web developer drops it into the webpage. Otherwise they have to do an extra step of coding in a specific size. Let’s size it properly now in Illustrator.

4. Hit Cmd–A (Mac) or Ctrl–A (Windows) to select all.
5. Open the Transform panel by choosing Window > Transform.
6. To the right of W and H, make sure the Link icon is enabled (so they’re linked).

7. Set W (Width) to 229 px and hit Return (Mac) or Enter (Windows) to apply it.

   The logo should now be scaled smaller (proportionally).

8. Choose File > Export > Export As.

   NOTE: Illustrator can also make an SVG using File > Save As, but File > Export is newer. The SVG code that File > Export writes should be cleaner and smaller (so it downloads faster).

9. Navigate to Desktop > Class Files > yourname-Photoshop for Web Class > iTastify > optimized.
10. Set Format (Mac) or Save as Type (Windows) to SVG (svg).
11. Click Export.

12. In the options that appear, set the following:

    Styling:	Presentation Attributes
    Font:	Convert to Outlines
    Images:	Embed
    Object IDs:	Layer Names
    Decimal:	2
    	Check Minify
    	Uncheck Responsive

    NOTE: You can learn more about these settings at tinyurl.com/ai-svg-export

13. Click OK to export the file.
14. Close the file and don’t save changes!

15. Switch back to Photoshop.

    NOTE: If you accidentally saved the changes in Illustrator, the logo will shrink in Photoshop. Hit Cmd–Z (Mac) or Ctrl–Z (Windows) to undo it.

16. Close the Photoshop file and don’t save changes.