Tutorial — the link trap
How to download an SVG from a link
You right-click the link, choose Save link as…, and get a 40KB HTML file. This is the most common way to end up with the wrong thing, and it has a simple explanation.
Watch it — 19 seconds
Getting what the link actually points at
The recording deliberately never uses Save link as… — because on a link like this, that menu item is the trap rather than the tool.
What the recording shows
- A link that points at a vector, not a page
- Save link as… would hand you the HTML wrapper
- Open the popup on the page the link is on
- The linked vector is in the list
- Give it a name that means something
- Download current — the file behind the link
Why the obvious thing fails
Save link as… saves the response, whatever it turns out to be
Your browser has no idea what is at the other end of a link until it asks. Save link as… does not inspect anything — it fetches the URL and writes whatever comes back to disk, under whatever name the link suggests.
So when the link goes to a viewer page — an icon detail page, a "download" page with a preview and a button — what comes back is HTML. You get a file called star.svg that is actually a web page, which is why it opens as a wall of text or refuses to open at all. The extension was never wrong; the link just never pointed at a vector in the first place.
Three link shapes cause almost all of this:
- A link to a viewer page. The vector is on the destination, not at the link. Follow it, then scan that page.
- A link that triggers a download by script. The
hrefis#orjavascript:, and a click handler builds the file. There is nothing at the address to save. - A link wrapping an inline icon. The clickable thing is the graphic, drawn as markup. Right-clicking it gives you the page menu — no image options at all, because the browser does not consider it an image.
The method that works on all three
Stop trying to save the link. Save the vector from the page that renders it — the answer is the same regardless of which of the three shapes you are looking at.
- Follow the link if it goes somewhere. If it opens a viewer or detail page, let it. That destination is where the vector actually lives, and it is what you want to scan.
- Open the popup on whatever page you land on. Click the toolbar button. The scan does not care whether you arrived by link, by search or by typing the address.
- Find it in the list. Page through with Prev and Next. On a detail page the vector you want is usually large and obvious in the preview.
- Name it and download. Type a filename and press Download current. What you get is a real vector file, not an HTML document wearing an .svg extension.
How to tell what you actually downloaded
If you already have a suspect file, this takes ten seconds: open it in any text editor. A real SVG starts with <svg or an XML declaration and is usually a few kilobytes. An HTML page in disguise starts with <!doctype html> and is typically much larger. If it is the second one, the link went to a page, and scanning that page will get you the real thing.
When the link is the icon
This is the third shape, and the most common on modern sites — a clickable icon that is inline <svg> markup. There is genuinely nothing to save: no address, no file, no image the browser recognises. Either scan the page, or right-click it and take Save this as SVG from the menu, which is covered in the quick-grab tutorial.
- The trap
- Save link as… writes whatever the URL returns — often HTML.
- The check
- Open the file in a text editor.
<!doctype html>means you got a page. - The fix
- Scan the page that renders the vector, rather than saving the link.
- Also see
- Right-click grab · From a URL
Good to know
Frequently asked
Why did Save link as… give me an HTML file?
Because the link pointed at a web page rather than a vector file. Save link as… fetches the URL and writes whatever comes back, without checking what it is — so a link to a viewer page produces a page, saved under the .svg name the link suggested.
The link href is just # — where is the file?
There is not one. A click handler builds the file in JavaScript when you click. Nothing exists at that address to save, so scanning the page for the rendered vector is the only route.
How can I check whether my file is a real SVG?
Open it in a text editor. A real SVG starts with
The link is an icon itself and right-click offers nothing useful.
That icon is inline SVG markup, which the browser does not treat as an image, so no image options appear. Either open the popup and scan the page, or use the extension’s own "Save this as SVG" item in the right-click menu.
Stop saving pages named .svg
Take the vector out of the page instead — it works on all three kinds of link.