- Start
- Funktionen
- Vs. Screenshot
Vergleich — SVG vs. Screenshot
SVG Downloader vs. Screenshots von Icons
Wenn dir ein Icon auffällt, ist der Reflex ein Screenshot. Das ist das falsche Werkzeug, sobald du das echte Asset brauchst. Hier der ehrliche Vergleich zwischen Screenshot, DevTools-Kopie und dem echten SVG.
Der Kompromiss
Das Bild eines Icons ist nicht das Icon
Ein Screenshot ist eine Rastergrafik: ein festes Pixelraster, aufgenommen in genau einer Größe. Das ist wirklich nützlich, wenn du nur eine schnelle visuelle Referenz willst — etwas für ein Dokument oder eine Nachricht, um zu sagen „das da, genau das“. Nichts installieren, nicht nachdenken, fertig.
Es fällt in dem Moment auseinander, in dem du das Icon benutzen willst. Skaliere es hoch und es verschwimmt, denn über den aufgenommenen Pixeln gibt es keine weiteren. Färb es um und du malst über ein Foto. Nimm es in einen Build und du lieferst ein schweres PNG, wo ein 400-Byte-Vektor hingehört hätte. Der Screenshot beantwortete „wie sieht es aus“; nie „gib mir die Datei“.
Das Kopieren aus den DevTools ist der ehrliche Mittelweg — du bekommst das echte Markup —, aber es ist mühsam. Du suchst den richtigen <svg>-Knoten, kopierst sein äußeres HTML, fügst es in eine Datei ein und merkst dann, dass sie sich nicht öffnen lässt, weil der Namensraum fehlt. Für CSS-Hintergründe, <use>-Sprite-Referenzen oder die zwanzig anderen Icons der Seite hilft es ohnehin nicht.
| Screenshot / PNG | Aus DevTools kopieren | SVG Downloader | |
|---|---|---|---|
| Ausgabeformat | Raster-PNG | SVG-Markup (von Hand) | Echte .svg-Datei |
| Bleibt beim Skalieren scharf | Nein — verschwimmt | Ja | Ja |
| Editierbar / umfärbbar | Nein | Ja | Ja |
| Dateigröße | Schwer | Winzig | Winzig |
| Funktioniert bei Inline-SVG | Nur als Bild | Ja | Ja |
| Funktioniert bei CSS-Hintergründen | Nur als Bild | Nein | Ja |
| Funktioniert bei Sprites (<use>) | Nur als Bild | Selten | Ja — im selben Dokument |
| Stapel / ganze Seite | Nein | Nein | Ja — als ZIP |
| Aufwand | Gering | Hoch, mühsam | Zwei Klicks |
Wann was richtig ist
- Screenshot — du willst eine visuelle Referenz zum Draufzeigen, nicht das Asset. Völlig in Ordnung und dafür schneller als alles andere.
- Aus DevTools kopieren — du brauchst genau ein Inline-Icon, bist ohnehin im Inspector und hast nichts dagegen, den Namensraum selbst zu reparieren.
- SVG Downloader — du willst den echten Vektor: scharf, editierbar, winzig. Er liest Inline-SVG, CSS-Hintergründe und Sprite-Referenzen, repariert das fehlende
xmlns, benennt die Datei sinnvoll und kann die ganze Seite als ZIP packen. Alles auf deinem Gerät — nichts wird hochgeladen.
Wenn du dich für das Asset statt für ein Bild davon entschieden hast: Die Anleitung für jede Website geht den ganzen Ablauf durch.
Gut zu wissen
Screenshot oder SVG?
Reicht ein Screenshot eines Icons jemals aus?
Ja — als schnelle visuelle Referenz. Wenn du nur das Bild eines Icons in ein Dokument oder einen Chat kleben willst, um darauf zu zeigen, reicht ein Screenshot. Er reicht nicht mehr, sobald du das Icon skalieren, umfärben oder ausliefern willst, denn ein Screenshot ist ein Raster fester Größe, nicht das Asset.
Warum ist ein SVG für ein Icon besser als ein PNG?
Ein SVG ist Vektortext: Es bleibt in jeder Größe gestochen scharf, ist meist nur ein Bruchteil so groß wie eine Rastergrafik, und du kannst seine Pfade umfärben oder bearbeiten. Ein PNG aus einem Screenshot ist an die aufgenommenen Pixel gebunden und verschwimmt, sobald es hochskaliert wird.
Hol dir das Icon, nicht sein Foto
Kostenlos, privat, und speichert den echten Vektor mit zwei Klicks.