Comment enregistrer un SVG qui se trouve sur un site Web sur mon ordinateur?

16

Je dois travailler avec un logo de ce site Web (dans le coin supérieur gauche):

entrez la description de l'image ici

Voici le morceau de code que j'ai copié à partir de la page:

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

Je ne suis pas très compétent dans ce domaine, mais j'ai déjà essayé de le coller dans un fichier texte avec une sauvegarde supplémentaire en tant que ".svg", mais en vain.
(Peut-être que quelque chose ne va pas avec les balises)

PS: Tout va bien avec le copyright! Je ne peux tout simplement pas contacter l'autre concepteur de ce site pour demander un vecteur pour le moment.

website-design svg save Aksana Zinchanka
la source
2
Avez-vous obtenu la permission d'utiliser / d'adapter le logo? Vous pourriez rencontrer de sérieux problèmes si vous parcourez simplement le logo du Web. Et s'ils vous ont demandé de le changer, pourquoi ne pas simplement leur demander les fichiers source?
PieBie
Je travaille maintenant avec ce média, je n'arrive pas à joindre l'un de leurs designers pour demander un vecteur!
Aksana Zinchanka
Il semble que vous le fassiez correctement, vous devriez simplement être en mesure d'enregistrer le code au format .svg puis de l'ouvrir dans un éditeur de vecteur qui prend en charge svg. En quoi cela ne fonctionne-t-il pas? Quels programmes graphiques avez-vous essayés? Et quel éditeur de texte (Mac textedit aime ruiner les choses de manière surprenante)
user56reinstatemonica8
1
Comme le dit l'utilisateur, collez-le simplement dans un éditeur de texte et ajoutez-le .svgà la fin du nom lorsque vous l'enregistrez. Selon les paramètres de votre système d'exploitation, il peut toujours ajouter la mauvaise extension comme logo.svg.txt. S'il le fait, renommez-le directement (sans réenregistrer) et supprimez l'extension incorrecte (.txt). Essentiellement, il devrait s'ouvrir correctement si le nom de fichier complet se termine par .svg.
Dom

Réponses:

20

Vous pouvez exécuter ce code sur votre 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 utilisez ce bookmarklet. A parfaitement fonctionné pour moi:

entrez la description de l'image ici

Anibal
la source
1
Oui, cela fonctionne, mais peut-être ajouter un commentaire expliquant que cette exécution est un script tiers sur leur page? Un nytimesscript de temps est probablement bien, mais c'est un habbit dangereux à enseigner.
Tom
Cela a mieux fonctionné pour moi dans Safari que dans Chrome
MicroMachine
3

L'extrait que vous avez publié n'est pas du code XML valide. Il a besoin d'une déclaration XML et la <path>balise doit être fermée.

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

Même après avoir corrigé ces choses, si j'ouvre cela dans Inkscape, cependant, cela ne ressemble toujours pas au logo sur le site Web. Vous feriez probablement mieux d'essayer quelque chose comme ça pour extraire le SVG à la place.

Scribblemacher
la source
Le copier avec Firefox, soit via l'inspecteur d'objets (qui ajoute un </path>) soit directement via la source de page (qui ne le fait pas) me donne un SVG qui peut être ouvert avec Illustrator - et il ressemble exactement au logo sur le site.
usr2564301
3

Si vous utilisez Safari sur macOS, il existe une fonctionnalité intégrée pour cela. Cliquez simplement avec le bouton droit sur l'image SVG, appuyez sur "Enregistrer la page sous ..." puis choisissez "Format: Source de la page" dans le menu déroulant résultant.

entrez la description de l'image ici

entrez la description de l'image ici

Casimir
la source
Cela ne semble pas fonctionner si le logo n'est pas accessible via du code (par exemple intégré dans une classe) - quand ce n'est pas seulement un clic droit peut permettre à l'utilisateur de charger l'image, ou de glisser-déposer sur le bureau ou de regarder dans le développeur ressources de la page du menu
MicroMachine
-3

Copiez l'URL puis ouvrez-la dans Inkscape. Peasy facile!

Alexandra
la source
Bonjour Alexandra, bienvenue à GDSE et merci pour votre réponse. Pourriez-vous nous donner un peu plus d'informations? Comment ouvrir un lien dans Inkscape? Quelles options de menu choisir? Supposons que l'Asker est un débutant dans le logiciel et que vous êtes généralement bon. Merci! Si vous avez des questions, veuillez consulter le centre d'aide ou envoyer un ping à l'un de nous dans le chat de conception graphique une fois que votre réputation est suffisante (20). Continuez à contribuer et profitez du site!
Vincent
-4

Sûr. Rendez-le compliqué si vous le souhaitez - mais ce n'est pas le cas. Ouvrez le fichier .svg dans une nouvelle fenêtre de navigateur. Choisissez imprimer -> enregistrer au format pdf -> ouvrir dans l'illustrateur ou d'autres applications vectorielles. :)

BenTen
la source
5
Vous avez déjà obtenu SVG alors - pourquoi le compliquer en ajoutant une étape au PDF?
Michael Schumacher