Wie speichere ich eine SVG-Datei, die sich auf einer Website befindet, auf meinem Computer?

16

Ich muss mit einem Logo von dieser Website arbeiten (in der oberen linken Ecke):

Bildbeschreibung hier eingeben

Hier ist der Code, den ich von der Seite kopiert habe:

<svg viewBox="0 0 215 50" height="50" width="215" xmlns="http://www.w3.org/2000/svg"><path d="M128.783 40.08v7.74h2.078v-5.66h18.843v5.66h2.08v-7.74h-3.322V5.82h-14.017c0 14.588-.467 23.26-2.596 34.263h-3.064zm-43.58 2.08h4.154V5.82h-4.153v3.116l-9.138 24.352V5.818h-4.153V42.16h4.153v-3.114l9.138-24.35v27.465zm-22.842 0h4.36l-6.904-21.08 4.83-15.262h-2.13l-4.88 15.263H52.08V5.82h-4.155V42.16h4.156v-19h4.048l6.233 19zm71.562-2.08c1.764-10.433 2.492-18.842 2.598-32.186h7.783V40.08h-10.38zm74.6 2.08h4.31L204.894 5.82h-4.31l.88 4.206-6.852 32.137h2.13l2.59-12.097h6.548l2.643 12.098zm-169.574 0h4.31L35....8zm147.355 0h4.158V5.82h-13.968v2.076c-.05 8.05-.414 18.12-1.143 23.204-.466 3.066-1.61 5.508-3.532 5.508v5.555c3.588 0 4.623-4.83 5.246-9.24.936-6.752 1.4-16.976 1.506-25.025h7.732V42.16zM159.88 7.896h9.347V5.818H155.73V42.16h13.497v-2.08h-9.348V20.564h7.265v-2.076h-7.266V7.895zm-59.1 0h9.34V5.818H96.626V42.16h13.496v-2.08h-9.34V20.564h7.266v-2.076h-7.265V7.895zm-96.2 0h8.306v34.267h4.152V7.895h8.306V5.818H4.58v2.077zm28.396 6.023l2.858 14.067h-5.66l2.802-14.067zm169.58 0l2.853 14.067h-5.66l2.807-14.067z"></svg>

Ich bin nicht sehr geschickt darin, aber ich habe bereits versucht, es in eine Textdatei einzufügen und es als ".svg" zu speichern, aber alles umsonst.
(Vielleicht stimmt etwas mit den Tags nicht)

PS: Mit dem Copyright ist alles in Ordnung! Ich kann den anderen Designer von dieser Seite gerade nicht kontaktieren, um nach einem Vektor zu fragen.

website-design svg save

— Aksana Zinchanka
quelle

2

Haben Sie die Erlaubnis erhalten, das Logo zu verwenden / anzupassen? Sie könnten ernsthafte Probleme bekommen, wenn Sie einfach durch das Web gehen und die Logos stehlen. Und wenn Sie gefragt wurden, ob Sie es ändern möchten, fragen Sie sie dann einfach nach den Quelldateien.

— PieBie

Ich arbeite jetzt mit diesen Medien, ich kann einfach keinen ihrer Designer erreichen, um nach einem Vektor zu fragen!

— Aksana Zinchanka

Es hört sich so an, als ob Sie es richtig machen. Sie sollten nur in der Lage sein, den Code als .svg zu speichern und ihn dann in einem Vektoreditor zu öffnen, der svg unterstützt. Inwiefern funktioniert das nicht? Welche Grafikprogramme hast du ausprobiert? Und welcher Texteditor (Mac textedit liebt es, Dinge auf überraschende Weise zu ruinieren)

— user56reinstatemonica8

1

Fügen Sie es, wie der Benutzer sagt, einfach in einen Texteditor ein und fügen .svgSie es beim Speichern am Ende des Namens hinzu. Abhängig von den Einstellungen Ihres Betriebssystems wird möglicherweise immer noch die falsche Erweiterung wie hinzugefügt logo.svg.txt. Wenn dies der Fall ist, benennen Sie es einfach direkt um (nicht erneut speichern) und entfernen Sie die falsche Erweiterung (TXT). Im Wesentlichen sollte es korrekt geöffnet werden, wenn der vollständige Dateiname mit endet .svg.

— Dom

20

Sie können diesen Code auf Ihrer Javascript-Konsole ausführen:

var e = document.createElement('script');
e.setAttribute('src', 'https://nytimes.github.io/svg-crowbar/svg-crowbar.js'); 
e.setAttribute('class', 'svg-crowbar');
document.body.appendChild(e);

oder nutzen Sie dieses Bookmarklet. Arbeitete perfekt für mich:

— Anibal
quelle

1

Ja, das funktioniert, aber vielleicht einen Kommentar hinzufügen, der erklärt, dass dieser Lauf ein Skript eines Drittanbieters auf seiner Seite ist? Ein nytimesTimescript ist wahrscheinlich in Ordnung, aber es ist eine gefährliche Gewohnheit, es zu lehren.

— Tom

Das hat in Safari besser funktioniert als in Chrome

— MicroMachine

3

Das von Ihnen veröffentlichte Snippet ist kein gültiges XML. Es benötigt eine XML-Deklaration und das <path>Tag muss geschlossen werden.

<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 215 50" height="50" width="215" xmlns="http://www.w3.org/2000/svg">
    <path
    d="M128.783 40.08v7.74h2.078v-5.66h18.843v5.66h2.08v-7.74h-3.322V5.82h-14.017c0 14.588-.467 23.26-2.596 34.263h-3.064zm-43.58 2.08h4.154V5.82h-4.153v3.116l-9.138 24.352V5.818h-4.153V42.16h4.153v-3.114l9.138-24.35v27.465zm-22.842 0h4.36l-6.904-21.08 4.83-15.262h-2.13l-4.88 15.263H52.08V5.82h-4.155V42.16h4.156v-19h4.048l6.233 19zm71.562-2.08c1.764-10.433 2.492-18.842 2.598-32.186h7.783V40.08h-10.38zm74.6 2.08h4.31L204.894 5.82h-4.31l.88 4.206-6.852 32.137h2.13l2.59-12.097h6.548l2.643 12.098zm-169.574 0h4.31L35....8zm147.355 0h4.158V5.82h-13.968v2.076c-.05 8.05-.414 18.12-1.143 23.204-.466 3.066-1.61 5.508-3.532 5.508v5.555c3.588 0 4.623-4.83 5.246-9.24.936-6.752 1.4-16.976 1.506-25.025h7.732V42.16zM159.88 7.896h9.347V5.818H155.73V42.16h13.497v-2.08h-9.348V20.564h7.265v-2.076h-7.266V7.895zm-59.1 0h9.34V5.818H96.626V42.16h13.496v-2.08h-9.34V20.564h7.266v-2.076h-7.265V7.895zm-96.2 0h8.306v34.267h4.152V7.895h8.306V5.818H4.58v2.077zm28.396 6.023l2.858 14.067h-5.66l2.802-14.067zm169.58 0l2.853 14.067h-5.66l2.807-14.067z"
    />
</svg>

Wenn ich das in Inkscape öffne, sieht es auch nach dem Beheben dieser Probleme nicht ganz so aus wie das Logo auf der Website. Du bist wahrscheinlich besser dran , etwas versuchen , wie dies stattdessen die SVG zu extrahieren.

— Scribblemacher
quelle

Wenn </path>ich es mit Firefox kopiere, entweder über den Objektinspektor (der ein ) oder direkt über die Seitenquelle (der nicht), erhalte ich eine SVG-Datei, die mit Illustrator geöffnet werden kann - und sie sieht genauso aus wie das Logo auf der Website.

— USR2564301

3

Wenn Sie Safari unter macOS verwenden, gibt es dafür eine integrierte Funktionalität. Klicken Sie einfach mit der rechten Maustaste auf das SVG-Bild, klicken Sie auf "Seite speichern unter ..." und wählen Sie im daraufhin angezeigten Dropdown-Menü "Format: Seitenquelle" aus.

— Kasimir
quelle

Dies scheint nicht zu funktionieren, wenn auf das Logo nicht über Code zugegriffen werden kann (z. B. eingebettet in eine Klasse). Wenn der Benutzer nicht einfach mit der rechten Maustaste klickt, lädt er möglicherweise das Bild oder zieht es per Drag & Drop auf den Desktop oder schaut im Entwickler nach menu's page resources

— MicroMachine

-3

Kopieren Sie die URL und öffnen Sie sie in Inkscape. Kinderleicht!

— Alexandra
quelle

Hallo Alexandra, willkommen auf der GDSE und danke für deine Antwort. Könnten Sie uns bitte etwas mehr Informationen geben? Wie öffne ich einen Link in Inkscape? Welche Menüoptionen stehen zur Auswahl? Angenommen, der Asker ist ein Anfänger in der Software und Sie sind meistens gut. Vielen Dank! Wenn Sie Fragen haben, wenden Sie sich an die Hilfe oder senden Sie einen Ping-Befehl an einen unserer Mitarbeiter im Grafik-Chat, sobald Ihr Ruf ausreicht (20). Tragen Sie weiter bei und genießen Sie die Seite!

— Vincent

-4

Sicher. Machen Sie es kompliziert, wenn Sie möchten - aber es ist nicht. Öffnen Sie die .svg-Datei in einem neuen Browserfenster. Wählen Sie Drucken -> Als PDF speichern -> In Illustrator oder anderen Vektor-Apps öffnen. :)

— BenTen
quelle

5

Dann haben Sie bereits SVG - warum komplizieren Sie es, indem Sie PDF einen Schritt hinzufügen?

— Michael Schumacher