Come faccio a salvare un SVG che si trova su un sito Web sul mio computer?

16

Devo lavorare con un logo da questo sito Web (nell'angolo in alto a sinistra):

inserisci qui la descrizione dell'immagine

Ecco il pezzo di codice che ho copiato dalla pagina:

<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>

Non sono molto abile in questo, ma ho già provato a incollarlo in un file di testo con un ulteriore salvataggio come ".svg", ma invano.
(Forse qualcosa non va nei tag)

PS: Va tutto bene con il copyright! Non riesco proprio a contattare l'altro designer di questo sito per chiedere un vettore in questo momento.

website-design svg save

— Aksana Zinchanka
fonte

2

Hai ottenuto l'autorizzazione per utilizzare / adattare il logo? Potresti incontrare seri problemi se vai in giro per il web a "rubare" il logo. E se ti chiedessero di cambiarlo, perché non chiedere loro solo i file sorgente?

— PieBie

Ora sto lavorando con questo media, non riesco proprio a contattare uno dei loro designer per chiedere un vettore!

— Aksana Zinchanka,

Sembra che tu lo stia facendo bene, dovresti essere in grado di salvare il codice come .svg quindi aprirlo in un editor vettoriale che supporta svg. In che modo questo non funziona? Quali programmi di grafica hai provato? E quale editor di testo (Mac textedit ama rovinare le cose in modi sorprendenti)

— user56reinstatemonica8

1

Come dice l'utente, basta incollarlo in un editor di testo e aggiungerlo .svgalla fine del nome quando lo si salva. A seconda delle impostazioni del sistema operativo, potrebbe comunque aggiungere l'estensione errata come logo.svg.txt. In tal caso, rinominalo direttamente (non ripristinandolo) e rimuovi l'estensione errata (.txt). In sostanza, dovrebbe aprirsi correttamente se il nome completo del file termina .svg.

— Dom

20

Puoi eseguire questo codice sulla tua console javascript:

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);

o usa questo bookmarklet. Ha funzionato perfettamente per me:

— Anibal
fonte

1

Sì, funziona, ma forse aggiungi un commento che spiega che questa esecuzione è uno script di terze parti sulla loro pagina? Una nytimessceneggiatura a volte probabilmente va bene, ma è un pericoloso habbit da insegnare.

— Tom,

Questo ha funzionato meglio per me in Safari che in Chrome

— MicroMachine

3

Lo snippet che hai pubblicato non è un XML valido. Ha bisogno di una dichiarazione XML e il <path>tag deve essere chiuso.

<?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>

Anche dopo aver risolto queste cose, se lo apro in Inkscape, tuttavia, non sembra ancora il logo sul sito Web. Probabilmente stai meglio provando qualcosa di simile per estrarre invece SVG.

— Scribblemacher
fonte

Copiarlo con Firefox, tramite Object Inspector (che aggiunge un </path>) o direttamente tramite Page Source (che non lo fa) mi dà un SVG che può essere aperto con Illustrator - e sembra esattamente come il logo sul sito.

— usr2564301,

3

Se stai usando Safari su macOS, c'è una funzionalità integrata per questo. Basta fare clic con il pulsante destro del mouse sull'immagine SVG, premere "Salva pagina come ...", quindi scegliere "Formato: Origine pagina" nel menu a discesa risultante.

— Casimir
fonte

Questo non sembra funzionare se il logo non è accessibile tramite codice (ad esempio incorporato in una classe) - quando non è solo un clic con il pulsante destro del mouse, l'utente può scaricare l'immagine o trascinarla sul desktop o guardare nello sviluppatore risorse della pagina del menu

— MicroMachine

-3

Copia l'URL, quindi aprilo in Inkscape. Vai tranquillo!

— Alexandra
fonte

Ciao Alexandra, benvenuto in GDSE e grazie per la tua risposta. Potresti darci qualche informazione in più? Come si apre un collegamento in Inkscape? Quali opzioni di menu scegliere? Supponi che Asker sia un principiante nel software e che tu sia per lo più bravo. Grazie! In caso di domande, consulta il centro assistenza o esegui il ping di uno di noi nella chat di progettazione grafica quando la tua reputazione è sufficiente (20). Continua a contribuire e goditi il sito!

— Vincent,

-4

Sicuro. Se vuoi, rendilo complicato, ma non lo è. Apri il file .svg in una nuova finestra del browser. Scegli stampa -> salva come pdf -> apri in Illustrator o altre app vettoriali. :)

— Ben TEN
fonte

5

Allora hai già SVG: perché complicarlo aggiungendo un passaggio al PDF?

— Michael Schumacher,