How to Use SVG Export to Download SVGs from a Website
Updated
SVG Export is a browser extension for Chrome, Firefox, and Edge that scans any web page for vector graphics and lets you download them as SVG, PNG, or JPG — individually or in bulk as a zip. It's aimed at designers and developers who need to grab icons, logos, or illustrations without digging through page source or developer tools. The workflow is three steps: activate the extension on a page, pick and adjust the assets you want, then export.
Before you start
- A Chromium-based browser (Chrome, Edge) or Firefox.
- The SVG Export extension installed from your browser's extension store. The site lists "Add to Chrome" as the primary install path and states support for Chrome, Firefox, and Edge.
- A page that actually contains SVGs. The extension reveals vectors already present on the page — it doesn't generate or fetch assets that aren't there.
Step 1: Activate and discover
Open the website containing the graphics you want, then launch SVG Export from your browser toolbar. According to the site, every vector on the page appears instantly in the extension's panel.
What to expect: a list or grid of all SVGs detected on the current page, including icons and illustrations that may be rendered small or hidden in the layout.
If nothing shows up: the graphics on that page are likely raster images (PNG, JPG, WebP) or CSS background images rather than inline SVGs. The extension only surfaces SVG elements, so a page built entirely from raster assets will come up empty.
Step 2: Rename, resize, and choose a format
Before anything reaches your downloads folder, you can adjust each asset:
| Action | What it does |
|---|---|
| Rename | Sets the filename for the exported file |
| Resize | Changes dimensions before export |
| Format | Choose SVG, PNG, or JPG |
| Preview | View the asset before saving |
Two details worth knowing:
- Inline styles. If an SVG is styled by external CSS on the page, the extension inlines those styles so the file looks correct once it's off the page. This matters for icons that appear colored or sized only because of the site's stylesheet.
- Copy to clipboard. Instead of downloading, you can copy the SVG code directly and paste it into Figma, Sketch, or your codebase.
Step 3: Bulk export
Select the SVGs you need — or select all — and download them together as a single zip. This replaces saving files one at a time, which is the main time cost when pulling a full icon set from a design system or documentation site.
Common snags
- Empty results on image-heavy pages. As noted above, raster images aren't SVGs. Check whether the graphic is an
<svg>element or an<img>pointing to a PNG/JPG. - Icons that look wrong after export. This is usually an external-CSS issue; the extension's inline-styles feature is designed to handle it, but complex cases (animations, CSS variables, fonts inside SVG text) may still render differently outside the original page.
- Canvas-drawn or icon-font graphics. Vectors drawn to a
<canvas>or delivered as an icon font aren't SVG elements and won't be detected.
What you get
The extension's stated feature set covers bulk export to zip, format choice (SVG/PNG/JPG), pre-export editing, style inlining, clipboard copy, and lossless vector extraction. The site reports 4.5 stars from 273 ratings and 340,000+ users across the three browsers. It also links to guides, a bug-report page, and a "Buy me a coffee" support page — the presence of a voluntary support link doesn't tell you whether any part of the tool is paid, so treat pricing as unconfirmed unless you see it stated at install time.