So kopierst du ein SVG von einer Website

Ansehen — 19 Sekunden

Beide Zwischenablagen, in einem Durchlauf

Tutorial · Zwischenablage

Achte darauf, wie sich die Statuszeile zwischen den beiden Klicks ändert — das Popup sagt dir genau, welche der beiden Zwischenablagen du gerade gefüllt hast.

Was die Aufnahme zeigt

1. Öffne das Popup auf der Seite, die du liest
2. Lande beim gewünschten Icon
3. Code kopieren — das Markup, direkt in deine Zwischenablage
4. Füg es in eine Komponente ein, und es funktioniert einfach
5. Oder Bild kopieren — ein PNG, für Dokumente und Chats
6. Zwei Zwischenablagen, ein Icon. In beiden Fällen keine Datei auf der Platte.

Wähle die richtige

Code kopieren und Bild kopieren sind keine Alternativen — es sind verschiedene Dinge

Sie sitzen nebeneinander im Popup, und es lohnt sich zu wissen, was jeder in deine Zwischenablage legt, denn das Falsche einzufügen kostet fünf verwirrte Minuten.

• Code kopieren legt das Markup als Text in deine Zwischenablage: <svg viewBox="0 0 24 24">…</svg>, bereinigt, mit bereits ergänztem xmlns-Namensraum. Füg es in eine React-Komponente, ein Vue-Template, eine HTML-Datei oder einen Texteditor ein. Füg es in Slack ein, und du bekommst eine Wand spitzer Klammern, denn es ist Text.
• Bild kopieren rastert den Vektor zu einem PNG und legt das als Bild in deine Zwischenablage. Füg es in Google Docs, Notion, Figma, Slack, eine E-Mail ein — überall, wo ein eingefügtes Bild angenommen wird. Es wird mindestens in 2× gerendert, damit es nicht als unscharfes Vorschaubild ankommt.

Faustregel: Ist das Ziel Code, nimm Code kopieren. Ist das Ziel ein Dokument, nimm Bild kopieren.

Ein Icon kopieren

Beide Wege teilen die ersten zwei Schritte.

1. Popup öffnen und das Icon finden. Klick auf den Button in der Symbolleiste und blättere mit Zurück und Weiter, bis die Vorschau das gewünschte zeigt.
2. Für Code: Code kopieren drücken. Die Statuszeile meldet SVG-Code in die Zwischenablage kopiert. Du hast nun bereinigtes Markup samt Namensraum, bereit zum Einfügen in eine Komponente.
3. Für ein Bild: Bild kopieren drücken. Die Statuszeile meldet PNG-Bild in die Zwischenablage kopiert. Der Vektor wird auf deinem Rechner in 2× oder besser gerendert und als Bild in die Zwischenablage gelegt.
4. Füg es dort ein, wo es hin soll. Markup in deinen Editor; das PNG in dein Dokument, Deck oder deinen Chat. In beiden Fällen wurde nichts auf die Platte geschrieben.

Was mit dem kopierten Markup schon geschehen ist

Das ist der Teil, der es besser macht als das Kopieren aus den DevTools. Bevor es deine Zwischenablage erreicht, läuft das Markup durch denselben Bereiniger wie jeder Download: Der xmlns-Namensraum wird ergänzt, falls er fehlte, damit das Fragment als gültiges Dokument für sich steht; und Script-Elemente, Event-Handler-Attribute und externe Referenzen werden entfernt, damit du nicht fremdes Seitenverhalten in deine Codebasis einfügst. Was du einfügst, sind die Formen, und nur die Formen.

In eine Komponente einfügen

Zwei Kleinigkeiten beißen dich in JSX. Attribute wie stroke-width und fill-rule müssen zu strokeWidth und fillRule werden; die meisten Editoren und Codemods erledigen das für dich. Und wenn das Icon currentColor nutzt — die meisten tun das —, nimmt es die gerade gültige Textfarbe an, was meist genau das ist, was du willst. Wird es schwarz gezeichnet, obwohl du Farbe erwartet hast: Genau deshalb — die Farbe lag im CSS der Seite, nicht in der Form.

Warum die Zwischenablage keine zusätzliche Berechtigung braucht

Beide Buttons schreiben aus einem Klick heraus, den du gemacht hast, in einer fokussierten Erweiterungsseite. Genau unter dieser Bedingung erlauben Browser Schreibzugriffe auf die Zwischenablage, die Erweiterung fordert also gar keine Zwischenablage-Berechtigung an — sie nutzt einfach die Geste, die du ihr schon gegeben hast.

Code kopieren

Bereinigtes Markup, xmlns inklusive — für Editoren und Komponenten.

Bild kopieren

Ein PNG in 2× oder besser — für Dokumente, Decks, Chats und E-Mails.

Bereinigung

Skripte, Handler und externe Referenzen werden vor beiden Kopien entfernt.

Berechtigungen

Keine Zwischenablage-Berechtigung angefordert — sie reitet auf deinem Klick mit.

Gut zu wissen

Häufig gefragt