Exporting icons as SVG from Photoshop PSD files

Designers across Sydney, Melbourne, and Brisbane often hand over icon assets in PSD format, only to discover that developers need scalable vector files for responsive layouts. Converting Photoshop layers to SVG bridges that gap, letting a single icon scale crisply from a tiny mobile navbar to a sprawling presentation slide. The workflow isn't always obvious, though, because Photoshop was built for raster editing rather than clean vector output.

Australian studios juggling tight deadlines and AUD-denominated client budgets appreciate any technique that saves round-trips between applications. A reliable PSD-to-SVG pipeline also keeps file sizes lean, which matters for regional users still relying on the NBN's mixed coverage. Understanding the export process means fewer hand-tracing sessions in Illustrator and faster turnaround on local projects.

Preparing your PSD for clean vector output

Before touching any export menu, audit every shape layer in your document. Photoshop preserves paths, but compound shapes, layer effects, and rasterised smart objects all break the conversion. Convert any text layers to outlines so the SVG doesn't depend on fonts that may be missing on the viewer's system. Flatten transparency, remove empty layers, and rename groups clearly; the resulting SVG will inherit those names as IDs, which makes styling downstream far easier.

Local freelancers working from cafés in Surry Hills or coworking spaces in Collingwood tend to inherit layered files from global teams. Standardising the source document before export avoids redoing the work when an offshore client suddenly needs a web-ready version. A quick pre-flight check also catches issues like rasterised shadows that would otherwise bloat the final SVG.

Choosing the right export method

Photoshop's built-in File > Export > Export As menu offers an SVG option, yet it handles only the simplest of shapes reliably. Complex paths, gradient meshes, and smart filters usually degrade or disappear. For most Aussie agencies dealing with intricate iconography, the safer route is opening the PSD in Adobe Illustrator through the Open command, then exporting from there. Illustrator interprets Photoshop's vector data more faithfully and gives you control over CSS properties, decimal precision, and grouping.

Another path worth mentioning involves third-party plugins and online converters, but these often inject unwanted metadata or compromise the path data. For commercial work destined for client sites in Melbourne's legal or financial sectors, precision matters more than convenience. The Illustrator route remains the most consistent for production-grade assets.

Walking through the Illustrator export

Open the PSD in Illustrator, keeping the "Convert Layers to Objects" option selected. This preserves your layer hierarchy as sublayers within the AI file. Use the Selection tool to inspect paths and verify that what looked crisp in Photoshop is still vector in Illustrator. Anything that arrived as a raster image must be traced or replaced, or it will simply be embedded as a flattened image inside the SVG.

When ready, choose File > Save As and pick SVG from the format dropdown. The SVG Options dialog lets you decide on font handling, image embedding, CSS properties, and decimal places. Set decimal precision to 1 or 2 to keep file sizes reasonable without visibly distorting curves. Click OK and Illustrator writes a clean SVG that mirrors your layer structure. Designers handling icon packs for platforms like the Shopify Australia theme marketplace rely on this method for consistent results across hundreds of assets.

Cleaning up and optimising the final file

Raw SVGs exported from Illustrator often contain redundant groups, unused definitions, and editor metadata. Running the file through SVGO or a similar optimiser strips that cruft, reducing file size by 30 to 70 percent. For performance-conscious studios targeting users on slower connections in outback Queensland or Western Australia, every kilobyte counts on a mobile data plan.

Beyond minification, review the output in a browser to confirm colours render as expected. Illustrator sometimes converts hex values into RGB triplets, which works fine but inflates the file. A quick find-and-replace in any text editor restores compact hex codes. Adding aria-labels and proper viewBox attributes also makes the icons more accessible, an important consideration for government and education projects across Australia.

Putting it all together in local workflows

Once you have a reliable PSD-to-SVG routine, integrate the step into your asset handoff documentation. Mention the required layer naming conventions, the no-effects rule, and the Illustrator export settings so junior designers can follow the same path. Many studios in Adelaide and Perth now treat vector export as a checklist item, much like exporting assets for social media platforms or preparing print-ready PDFs.

Designers apply these skills across diverse Australian industries, from fintech startups in Sydney's Surry Hills to agricultural platforms like vegetable gardening sites serving rural communities. A tidy SVG pipeline means one icon set can serve websites, native apps, and printed reports without rebuilding from scratch.

Try the Illustrator method on a small icon set this week and compare the output against Photoshop's native export. Subscribe to PSD Icons for fresh packs that already follow the layer conventions described above, and download the free starter bundle to put the workflow through its paces. If a particular icon is giving you trouble, send a note through the support page and the team will point you toward the most reliable fix.