Tutorial — why the online one missed them
Why an online SVG extractor can’t see this page
You pasted the URL, it found four icons, and you can see thirty. Nothing is broken — it simply never ran the page.
Watch it — 17 seconds
What running the page gets you
The distinction is not quality or effort — it is architectural. One approach reads a document; the other reads a rendered page.
What the recording shows
- An online tool only gets the URL you paste
- It never runs the page, so inline icons stay invisible
- An extension runs inside the page you are already on
- Logged-in pages and private dashboards included
- And nothing leaves your machine to make it work
The technical reason
Fetching a URL and rendering a page are different things
When you paste a URL into an online extractor, its server sends a plain HTTP request and gets back the HTML the server chose to send. It then searches that text for things that look like SVGs. That is a reasonable approach, and it misses most of a modern site, for four separate reasons.
- No JavaScript runs. On a React, Vue, Svelte or Angular site, the initial HTML is frequently close to empty — a root element and a script tag. Every icon appears only after the framework executes. A fetch sees the empty shell.
- No CSS is applied. A vector set as a
background-imagein a stylesheet only exists once styles are computed against elements. Text-searching HTML will not find it. - No session. The server fetching your URL is not logged in as you. Anything behind authentication returns a login page, so a dashboard, an admin panel or a paid tool is simply unreachable.
- Sprites are not resolved. A
<use href="#star">found in raw HTML is a pointer. Without a rendered document there is nothing to resolve it against, so you get an empty file.
An extension has none of these problems because it is not fetching anything. It runs inside the page you are already looking at, after the framework has rendered, after the styles have applied, with your session intact and the full document available to resolve references against.
Doing it in the page instead
There is no URL to paste, which is the point.
- Get the page into the state you want. Log in if it needs a login. Scroll, open the menu, switch to the tab with the icons on it. Whatever you can see, the scan can read.
- Click the toolbar button. The scan runs against the live DOM — framework-rendered icons, CSS backgrounds and sprite references included.
- Compare the count. This is the moment the difference shows. The number found here is typically several times what a URL fetch reported.
- Take them. Individually with Download current, or the whole set with Download all as ZIP. Nothing leaves your machine at any point.
The other question: where does your file go?
An online tool has to receive your data to work on it. Depending on the service that can mean the URL of a page you were logged into, or an uploaded file, sitting on somebody else's server — subject to their retention policy, their logging, their jurisdiction and their security. For a public marketing page that may be a fine trade. For an internal dashboard, a client's staging site or an unreleased design, it is a data transfer you probably did not intend to make.
The on-device version does not involve that trade at all, and not as a policy commitment: the extension's content security policy sets connect-src 'none', so its pages cannot open a network connection. There is no endpoint to send to. It also means the whole thing works offline.
Where an online tool is genuinely the better choice
Being fair about it: if the URL points directly at a .svg file and all you want is to convert or optimise it, an online tool is quick and requires installing nothing. If you are on a locked-down machine where you cannot install an extension, it may be your only option. And for optimising SVGs specifically — running SVGO over them, stripping metadata, shrinking paths — the good online optimisers do a job this extension does not attempt at all.
The honest limits on this side
An extension needs installing, needs a Chromium browser, and cannot do anything on a page you cannot yourself open — chrome:// pages, the Web Store, extension galleries. It is also strictly interactive: there is no API and no way to run it over a list of a thousand URLs. For that, a headless browser is the correct tool.
- A URL fetch misses
- JavaScript-rendered icons, CSS backgrounds, logged-in pages and sprite targets.
- An extension sees
- The rendered DOM — after the framework, after the styles, with your session.
- Privacy
connect-src 'none'. No endpoint to upload to; works offline.- Online tools win at
- Optimising a
.svgyou already have, and machines where you cannot install anything.
Good to know
Frequently asked
Why did the online extractor only find a few icons?
It fetched the HTML but never rendered the page. On a JavaScript-rendered site most icons do not exist in the initial HTML at all, CSS background vectors require computed styles, and sprite references cannot be resolved without a live document.
Can an online tool extract from a page I have to log in to see?
No. Its server is not logged in as you, so it receives a login page. An extension runs in your browser with your session, so it works normally.
Is it safe to paste a URL into an online extractor?
For a public marketing page, generally yes. For an internal dashboard, a staging site or an unreleased design, you are handing a third party a URL and its contents — worth thinking about before you do it.
Does the extension upload anything?
It cannot. Its content security policy sets connect-src to none, so its pages are forbidden from opening a network connection. It works with your network disconnected.
When is an online tool actually better?
When the URL points straight at a .svg file and you want to optimise or convert it, or when you are on a machine where you cannot install extensions. Online SVG optimisers in particular do a job this extension does not attempt.
Read the page, not a copy of its HTML
Framework-rendered icons, logged-in pages, and nothing uploaded.