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

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

Respostas: