¿Cómo guardo un SVG que está en un sitio web en mi computadora?

16

Necesito trabajar con un logotipo de este sitio web (en la esquina superior izquierda):

ingrese la descripción de la imagen aquí

Aquí está el fragmento de código que copié de la página:

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

No soy muy hábil en esto, pero ya he intentado pegarlo en un archivo de texto con más guardado como ".svg", pero todo en vano.
(Tal vez algo está mal con las etiquetas)

PD: ¡Todo está bien con los derechos de autor! Simplemente no puedo contactar al otro diseñador de este sitio para solicitar un vector en este momento.

website-design svg save Aksana Zinchanka
fuente
2
¿Obtuviste permiso para usar / adaptar el logotipo? Podría tener serios problemas si solo navega por la web 'robando' el logotipo. Y si le pidieron que lo cambiara, ¿por qué no solo pedirles los archivos fuente?
PieBie
Ahora estoy trabajando con este medio, ¡no puedo comunicarme con uno de sus diseñadores para pedirle un vector!
Aksana Zinchanka
Parece que lo estás haciendo bien, solo deberías poder guardar el código como .svg y luego abrirlo en un editor de vectores que admita svg. ¿De qué manera esto no funciona? ¿Qué programas gráficos has probado? Y qué editor de texto (Mac textedit ama arruinar las cosas de manera sorprendente)
user56reinstatemonica8
1
Como dice el usuario, simplemente péguelo en un editor de texto y agréguelo .svgal final del nombre cuando lo guarde. Dependiendo de la configuración de su sistema operativo, aún puede agregar la extensión incorrecta como logo.svg.txt. Si lo hace, cámbiele el nombre directamente (sin volver a guardar) y elimine la extensión incorrecta (.txt). Esencialmente, debería abrirse correctamente si el nombre completo del archivo termina con .svg.
Dom

Respuestas:

20

Puede ejecutar este código en su consola 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 use este bookmarklet. Funcionó perfectamente para mí:

ingrese la descripción de la imagen aquí

Anibal
fuente
1
Sí, esto funciona, pero ¿tal vez agregar un comentario que explique que esta ejecución es un script de terceros en su página? Un nytimesguión de tiempos probablemente esté bien, pero es un hábito peligroso para enseñar.
Tom
Esto funcionó mejor para mí en Safari que en Chrome
MicroMachine
3

El fragmento que publicó no es XML válido. Necesita una declaración XML y la <path>etiqueta debe cerrarse.

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

Incluso después de arreglar esas cosas, si abro eso en Inkscape, sin embargo, todavía no se ve como el logotipo en el sitio web. Probablemente sea mejor que intentes algo como esto para extraer el SVG.

Garabato
fuente
Copiarlo con Firefox, ya sea a través del Object Inspector (que agrega un </path>) o directamente a través de Page Source (que no) me da un SVG que se puede abrir con Illustrator, y se ve exactamente como el logotipo en el sitio.
usr2564301
3

Si está utilizando Safari en macOS, hay una funcionalidad incorporada para esto. Simplemente haga clic derecho en la imagen SVG, presione "Guardar página como ..." y luego seleccione "Formato: Fuente de página" en el menú desplegable resultante.

ingrese la descripción de la imagen aquí

ingrese la descripción de la imagen aquí

Casimiro
fuente
Esto no parece funcionar si no se puede acceder al logotipo a través del código (por ejemplo, incrustado en una clase); cuando no se trata solo de hacer clic con el botón derecho, el usuario puede cargar la imagen, arrastrar y soltar en el escritorio o buscar en el desarrollador recursos de la página del menú
MicroMachine
-3

Copie la URL y luego ábrala en Inkscape. ¡Pan comido!

Alexandra
fuente
Hola Alexandra, bienvenido a GDSE y gracias por tu respuesta. ¿Podría por favor darnos un poco más de información? ¿Cómo abres un enlace en Inkscape? ¿Qué opciones de menú elegir? Supongamos que el Asker es un principiante en el software y que en su mayoría eres bueno. ¡Gracias! Si tiene alguna pregunta, consulte el centro de ayuda o haga ping a uno de nosotros en el Chat de diseño gráfico una vez que su reputación sea suficiente (20). ¡Sigue contribuyendo y disfruta del sitio!
Vincent
-4

Seguro. Hazlo complicado si quieres, pero no lo es. Abra el archivo .svg en una nueva ventana del navegador. Elija imprimir -> guardar como pdf -> abrir en Illustrator u otras aplicaciones vectoriales. :)

Ben diez
fuente
55
Entonces ya tienes SVG, ¿por qué complicarlo agregando un paso a PDF?
Michael Schumacher