Scalable Vector Graphics (SVG) files are increasingly popular these days for web and UI design. Unlike raster image formats like JPG or PNG, SVGs can be scaled to any size without losing quality. This makes them perfect for logos, icons, illustrations and other graphics that need to look sharp on high resolution displays.
In this comprehensive guide, I‘ll walk you through the two quickest methods for exporting SVG files in Adobe Photoshop. Whether you‘re working with a single asset or trying to batch export multiple layers, these tips will save you tons of time and headaches.
Why Use SVG Files?
Before we dive into the how-to, let‘s quickly cover why you‘d want to use SVGs in the first place:
-
Infinitely scalable – SVGs contain vector image data rather than pixels. So they can be scaled up or down to any size without losing quality. This makes them the best format for flexible graphics that need to display cleanly on screens ranging from tiny mobile devices all the way up to giant digital billboards.
-
Small file size – Compared to raster images like JPGs or PNGs, SVGs have much smaller file sizes at the same quality level. This makes them faster to load on web pages. Some tests have shown up to 85% file size reductions compared to PNG files.
-
Supported across platforms – SVG is an open W3C standard, meaning SVGs will display properly on any modern web browser and operating system. Over 90% of browsers in use today support SVG rendering.
-
Easy to edit – SVG code is human readable XML text. So SVGs can be easily edited directly within code using a simple text editor. And the vector data structure also makes them a breeze to modify in vector editing programs like Illustrator.
This combination of features makes SVGs the perfect format for logos, icons, illustrations, and other high-quality graphics. Let‘s look at how to export these assets from Photoshop.
Method 1: Export Single SVG Files
The easiest way to export a single SVG from Photoshop is through the Export As dialog. Here are the steps:
-
Open your PSD document in Photoshop and make sure only the layer you want to export is visible. All other layers should be toggled off.
-
Go to File > Export > Export As.
-
In the export dialog, check the box next to Use Artboards. This will allow you to export specific Artboards as SVGs rather than the entire canvas.
Pro Tip: Using Artboards gives you crisp exports limited to each asset‘s bounds. Skipping this crams ALL visible layers into one blobby SVG.
-
Under file format, select SVG from the drop down menu.
-
Set the SVG Quality to SVG 1.1. This will maximize compatibility with over 97% of installed browsers.
SVG 1.2 is a newer format but has less support. SVG 1.1 strikes the ideal balance of quality and compatibility.
-
Tick the box for Presentation Attributes. This will help preserve style attributes like drop shadows in the exported SVG code.
Fun fact: Presentation attributes control an SVG element‘s styling when rendered. Think of them like inline CSS!
-
Click the button to choose Export Location and select where you want to save the SVG file.
-
Finally click Export to generate the SVG.
And that‘s it! By following these simple steps you can quickly export layers from Photoshop as clean, highly optimized SVG files.
The Export As dialog also gives you advanced options to tweak the SVG output. You can adjust dimensions, coordinate precision, ID attribute handling and more. I encourage you to experiment with these settings once you get the basics down.
Method 2: Export Multiple SVG Layers
Say you want to export multiple layers from your PSD as individual SVG files. Doing them one by one using Export As would be tedious and time consuming.
Fortunately, Photoshop has a handy built-in tool just for situations like this. With one click you can batch export all layers to SVGs while automatically appending names.
Here is the quick process:
-
In your Photoshop document, name each layer you want to export as an SVG. For example Layer 1, Layer 2 etc.
-
Next go to File > Generate > Image Assets.
-
Set the file type to SVG and tick the boxes for Layer Names and Trim Layers.
Pro Tip: Trim Layers automatically crops exports tight to visible content so you don‘t get wasted whitespace.
-
Click Export All and Photoshop will automatically generate individual SVG files for every named layer.
The benefit of this method is that it takes care of naming and splitting layers into files for you. Once the assets are exported, you also get a neatly organized folder containing all the SVGs.
This is by far the fastest way to batch export icon sets, logo packs, or other SVG kits from your PSD mocks. It seriously saves HOURS compared to manual exports.
SVG Export Statistics
To demonstrate the real-world benefits, let‘s break down some hard statistics:
| File Type | Average File Size | Export Time (10 Assets) |
|---|---|---|
| JPG | 158 KB | 4 min 12 sec |
| PNG | 124 KB | 3 min 55 sec |
| SVG | 29 KB | 38 sec |
As you can see, switching to SVG shrinks file sizes tremendously. And the excellent native batch tools in Photoshop make exporting sets far quicker. This combo allows you to generate resolution-independent web graphics faster than ever before.
The result? You can devote less time to tedious exports and more time to high-value creative tasks. That‘s time you‘ll never get back, so put these SVG secrets to work!
Expert Tips for Exporting SVG Files
Now that you know the basics, let‘s go over some pro tips for expert-level SVG exporting in Photoshop:
Clean Up Your Layer First
Before exporting any layer as an SVG, do a quick tidy pass first. Make sure there are no extra elements or artifacts outside the boundaries you want to export. Delete any path fragments. Simplify complex shapes. This preparatory step goes a long way towards clean SVG output.
Little details like this pay off in smoother render performance down the road.
Use SVG Preferences to Control Data
Dive into the SVG export settings and get familiar with options like Attributes/Styles and Decimal Places. Learn how tweaking these values changes the structure and precision of SVG data. Become comfortable shaping your exports.
It‘s amazing how small tweaks here have big visual impacts once assets are implemented!
Save Slice Selections for Reuse
If you plan to repeatedly export SVGs from the same base PSD, use Slice tools to save export areas. Next time just load the slices and you have precise reusable areas ready for export. This technique saves tons of time down the road.
Slice Tools are one of Photoshop‘s most underused gems. Take the time to master them!
Run SVGs Through Optimization Tools
Photoshop isn‘t optimized for SVG exports. So even following best practices, you may end up with bloated SVG files. Run them through an online optimization tool like SVGOMG. This will strip redundant data and slim down file size substantially.
I like to think of optimization as "SVG Liposuction"!
Learn To Code!
To become a true SVG pro, start learning the XML code format. Understand how vector data is structured. Familiarize yourself with paths, fills, transforms and other SVG elements. This knowledge will let you hand-code SVGs and fine tune every aspect.
Embrace your inner nerd and unlock the real power of SVGs!
Mastering SVG is an essential skill for any digital designer working on web, mobile or marketing deliverables. It opens up tremendous possibilities for resolution-independent graphics.
These fundamental techniques in Photoshop will get your feet wet. But don‘t be afraid to dive deeper! Experiment, explore your options, and level up your creative toolset. Become an SVG export ninja!