Como salvar um SVG que está em um site no meu computador?

16

Preciso trabalhar com um logotipo deste site (no canto superior esquerdo):

insira a descrição da imagem aqui

Aqui está o trecho de código que copiei da 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>

Eu não sou muito habilidoso nisso, mas já tentei colá-lo em um arquivo de texto com mais economia como ".svg", mas tudo em vão.
(Talvez algo esteja errado com as tags)

PS: Está tudo bem com os direitos autorais! Eu simplesmente não consigo entrar em contato com o outro designer deste site para solicitar um vetor agora.

website-design svg save

— Aksana Zinchanka
fonte

2

Você obteve permissão para usar / adaptar o logotipo? Você pode ter sérios problemas se apenas navegar pelos logotipos da web 'roubando'. E se eles pediram para você mudar, por que não pedir apenas os arquivos de origem?

— PieBie

Agora estou trabalhando com essa mídia, simplesmente não consigo entrar em contato com um de seus designers para solicitar um vetor!

— Aksana Zinchanka

Parece que você está fazendo certo, você deve ser capaz de salvar o código como .svg e abri-lo em um editor de vetores que suporte svg. De que maneira isso não está funcionando? Quais programas gráficos você já tentou? E o editor de texto (amores Mac Editor de Texto para coisas ruína em formas surpreendentes)

— user56reinstatemonica8

1

Como o usuário diz, basta colá-lo em um editor de texto e adicionar .svgno final do nome quando você o salvar. Dependendo das configurações do seu sistema operacional, ele ainda pode adicionar a extensão errada, como logo.svg.txt. Se isso acontecer, basta renomeá-lo diretamente (sem salvar novamente) e remover a extensão incorreta (.txt). Essencialmente, ele deve abrir corretamente se o nome completo do arquivo terminar com .svg.

— Dom

20

Você pode executar este código no seu 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);

ou use este bookmarklet. Funcionou perfeitamente para mim:

— Anibal
fonte

1

Sim, isso funciona, mas talvez adicione um comentário explicando que essa execução é um script de terceiros em sua página? Um nytimesscript do times provavelmente é bom, mas é um hábito perigoso para ensinar.

— Tom

Isso funcionou melhor para mim no Safari do que no Chrome

— Micromachine

3

O snippet que você postou não é XML válido. Ele precisa de uma declaração XML e a <path>tag precisa ser fechada.

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

Mesmo depois de consertar essas coisas, se eu abrir no Inkscape, ele ainda não parece o logotipo do site. Provavelmente, é melhor tentar algo assim para extrair o SVG.

— Scribblemacher
fonte

Copiá-lo com o Firefox, seja através do Object Inspector (que adiciona a </path>) ou diretamente através da Page Source (que não), fornece um SVG que pode ser aberto com o Illustrator - e se parece exatamente com o logotipo no site.

— usr2564301

3

Se você estiver usando o Safari no macOS, há uma funcionalidade integrada para isso. Simplesmente clique com o botão direito do mouse na imagem SVG, clique em "Salvar página como ..." e escolha "Formato: origem da página" no menu suspenso resultante.

— Casimir
fonte

Isso não parece funcionar se o logotipo não estiver acessível via código (por exemplo, incorporado em uma classe) - quando não for apenas clicar com o botão direito do mouse, o usuário poderá carregar a imagem ou arrastar e soltar na área de trabalho ou procurar no desenvolvedor os recursos da página de Menu

— micromachine

-3

Copie o URL e abra-o no Inkscape. Mole-mole!

— Alexandra
fonte

Olá Alexandra, bem-vindo ao GDSE e obrigado pela sua resposta. Você poderia nos dar um pouco mais de informação? Como você abre um link no Inkscape? Quais opções de menu escolher? Suponha que o Asker seja um iniciante no software e você seja muito bom. Obrigado! Se você tiver alguma dúvida, consulte a Central de Ajuda ou envie um ping para um de nós no Chat de design gráfico quando sua reputação for suficiente (20). Continue contribuindo e aproveite o site!

— Vincent

-4

Certo. Torne as coisas complicadas se você quiser - mas não é. Abra o arquivo .svg em uma nova janela do navegador. Escolha imprimir -> salvar como pdf -> abrir no illustrator ou em outros aplicativos de vetor. :)

— Ben dez
fonte

5

Você já possui o SVG - por que complicar adicionando uma etapa ao PDF?

— Michael Schumacher