So extrahierst du ein SVG-Logo von einer Website

Ansehen — 19 Sekunden

Das Zeichen, in voller Treue

Tutorial · Logos

Der Benennungsschritt zählt bei Logos mehr als bei allem anderen — ein Markenordner voller nummerierter Dateien ist ein Markenordner, den niemand benutzt.

Was die Aufnahme zeigt

1. Das Logo im Kopfbereich ist ein Inline-<svg>
2. Scanne die Seite, und es kommt mit dem Rest zurück
3. Blättere zum Zeichen selbst
4. Benenne es ordentlich für deinen Markenordner
5. In voller Treue gespeichert — skaliert bis zur Plakatwand
6. Prüf die Lizenz, bevor du das Zeichen eines anderen weiterverwendest

Vor dem Wie

Ein Logo ist jemandes Marke, und Extrahieren ist keine Erlaubnis

Das ist zwei Minuten wert, denn ein Fehler hier ist teuer. Ein Zeichen speichern zu können und es benutzen zu dürfen sind zwei verschiedene Fragen, und die zweite hat mit diesem Werkzeug nichts zu tun.

Grob gesagt, und dies ist keine Rechtsberatung: Das Logo einer Firma zu verwenden, um auf diese Firma zu verweisen — eine Kundenliste, eine „funktioniert mit“-Reihe, ein Pressestück, eine Vergleichstabelle — ist in der Regel akzeptabel, und die meisten Unternehmen veröffentlichen Markenrichtlinien, die das sagen. Es so zu verwenden, dass es Befürwortung, Partnerschaft oder Urheberschaft nahelegt, ist es nicht, und ein Zeichen zu verändern und als eigenes auszugeben ebenso wenig.

Der praktische Schritt: Bevor du es benutzt, such die Marken- oder Presseseite der Firma. Die meisten großen Organisationen veröffentlichen ein offizielles Asset-Kit mit dem Logo in mehreren Formaten, Schutzraum-Regeln, freigegebenen Farbvarianten und einer kurzen Lizenz. Dieses Kit ist sicherer und meist besser vorbereitet als alles, was du extrahierst — Extrahieren ist das, was du tust, wenn es kein Kit gibt oder du das Zeichen jetzt sofort für ein Mock-up brauchst.

Das Zeichen extrahieren

Logos sind meist der am leichtesten zu findende Vektor einer Seite, aus einem strukturellen Grund.

1. Geh auf die Startseite. Das Logo im Kopfbereich ist fast immer Inline-<svg> — Sites machen das, damit das Zeichen auf jedem Bildschirm knackig bleibt und für den Dunkelmodus umgefärbt werden kann.
2. Popup öffnen und scannen. Das Logo ist typischerweise unter den ersten gefundenen Vektoren, weil es weit oben im Dokument sitzt.
3. Blättere hin und bestätige in der Vorschau. Hier zählt die isolierte Vorschau: Sie zeigt dir, ob du die vollständige Kombination, die Wortmarke allein oder nur das Symbol hast. Seiten enthalten oft alle drei.
4. Benenne es und lade. Nimm einen Namen, den du später wiedererkennst — acme-logo-voll, acme-zeichen. Dann Aktuelles laden.

Wo sich die Varianten verstecken

Eine Site trägt meist mehr als eine Version ihres eigenen Zeichens, und die im Kopfbereich ist vielleicht nicht die gewünschte. Sieh in den Fußbereich, der oft eine einfarbige oder invertierte Variante hat. Sieh dir das mobile Layout in einem schmalen Fenster an, das die vollständige Kombination häufig durch das Symbol allein ersetzt. Und probier einen Dunkelmodus-Schalter, der eine helle Version auf dunklem Grund einwechseln kann. Jede davon ist ein eigener Vektor und jede taucht im Scan auf.

Warum das Logo schwarz herauskam

Nutzt das Zeichen currentColor, um sich an den Dunkelmodus anzupassen, hat die extrahierte Datei keine eigene Farbe und wird schwarz gezeichnet. Das ist das echte Quell-Markup. Färb es in Figma oder Illustrator um, oder nutze den Sprung zum SVG Color Changer. Speziell bei einem Markenzeichen: Nimm den offiziellen Farbwert aus den Markenrichtlinien, statt ihn per Pipette aus einem Screenshot zu ziehen — Bildschirme lügen über Farbe.

Wenn das Logo ein PNG ist

Manche Sites liefern noch ein Raster-Logo aus, und kein Werkzeug kann das zurück in einen Vektor verwandeln — die Kurvendaten sind weg. Deine Möglichkeiten sind das Marken-Kit der Firma, das meist den Vektor enthält, oder Nachzeichnen, was eine Annäherung mit leicht falschen Kurven ergibt, die ein Designer bemerkt. Frag nach dem Kit.

Meistens

Das Logo im Kopfbereich ist Inline-<svg>, es gehört also zu den zuerst gefundenen.

Varianten

Prüf Fußbereich, mobiles Layout und Dunkelmodus — oft drei verschiedene Dateien.

Rechtlich

Extrahieren ist keine Erlaubnis. Such zuerst das Marken-Kit der Firma.

Wenn es ein PNG ist

Es lässt sich nicht zurück in einen Vektor wandeln. Frag nach der offiziellen Datei.

Gut zu wissen

Häufig gefragt