Як зберегти SVG, який знаходиться на веб-сайті, на моєму комп’ютері?


16

Мені потрібно працювати з логотипом цього веб-сайту (у верхньому лівому куті):

введіть тут опис зображення

Ось фрагмент коду, який я скопіював зі сторінки:

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

Я не дуже досвідчений у цьому, але вже намагався вставити його до текстового файлу з подальшим збереженням як ".svg", але все даремно.
(Можливо, з тегами щось не так)

PS: З авторським правом все гаразд! Я просто не можу зв’язатися з іншим дизайнером із цього сайту, щоб зараз попросити вектор.


2
Ви отримали дозвіл на використання / адаптацію логотипу? Ви можете зіткнутися з серйозними проблемами, якщо просто обійдете логотип веб-сайту. І якщо вони попросили вас змінити, чому б просто не попросити їх у вихідних файлах?
PieBie

Зараз я працюю з цим засобом масової інформації, я просто не можу звернутися до одного з їхніх дизайнерів і попросити вектора!
Аксана Зінчанка

Це здається, що ви все робите правильно, ви просто зможете зберегти код як .svg, а потім відкрити його у векторному редакторі, що підтримує svg. Яким чином це не працює? Які графічні програми ви пробували? І який текстовий редактор (Mac textedit любить дивувати речі дивними способами)
user56reinstatemonica8

1
Як каже користувач, просто вставте його в текстовий редактор і додайте .svgдо кінця імені, коли ви збережете його. В залежності від налаштувань операційної системи, він все ще може додати неправильне розширення , як logo.svg.txt. Якщо це зробити, просто перейменуйте його безпосередньо (не поновлюючи) та видаліть неправильне розширення (.txt). По суті, він повинен відкриватися правильно, якщо закінчується повне ім'я файлу .svg.
Дом

Відповіді:


20

Цей код можна запустити на консолі 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);

або використовувати цю закладку. Для мене прекрасно працювали:

введіть тут опис зображення


1
Так, це працює, але, можливо, додайте коментар, пояснюючи, що цей сценарій стороннього сценарію на їхній сторінці? nytimesРаз сценарій, ймовірно , добре, але це небезпечно Habbit вчити.
Том

Це працювало для мене краще в Safari, ніж у Chrome
MicroMachine

3

Розміщений вами фрагмент недійсний XML. Для цього потрібна декларація XML, і <path>тег потрібно закрити.

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

Навіть після виправлення цих речей, якщо я відкрию це в Inkscape, він все ще не дуже схожий на логотип на веб-сайті. Вам, мабуть, краще спробувати щось подібне для вилучення SVG.


Скопіювавши його за допомогою Firefox, або через Object Inspector (який додає a </path>), або прямо через Source Source (що не робить), ви отримуєте SVG, який можна відкрити за допомогою Illustrator - і він виглядає точно як логотип на сайті.
usr2564301

3

Якщо ви використовуєте Safari на macOS, для цього є вбудована функціональність. Просто клацніть правою кнопкою миші зображення SVG, натисніть "Зберегти сторінку як ...", після чого у спадному меню виберіть "Формат: Джерело сторінки".

введіть тут опис зображення

введіть тут опис зображення


Схоже, це не працює, якщо логотип недоступний за допомогою коду (наприклад, вбудований у клас) - коли це не просто натискання правою кнопкою миші може дати можливість користувачеві завантажувати зображення, або перетягувати на робочий стіл або шукати розробника. Ресурси сторінки меню
MicroMachine

-3

Скопіюйте URL-адресу та відкрийте її в Inkscape. Простенька!


Привіт Олександре, ласкаво просимо на GDSE і дякуємо за вашу відповідь. Не могли б ви дати нам трохи більше інформації? Як відкрити посилання в Inkscape? Які параметри меню вибрати? Припустимо, що Asker - початківець у програмі, і ви здебільшого хороші. Спасибі! Якщо у вас виникнуть запитання, будь ласка, зверніться до довідкового центру або зателефонуйте одному з нас у чат із графічним дизайном, коли ваша репутація буде достатньою (20). Продовжуйте сприяти і насолоджуйтесь сайтом!
Вінсент

-4

Звичайно. Складіть це, якщо вам подобається - але це не так. Відкрийте .svg файл у новому вікні браузера. Виберіть друк -> зберегти як pdf -> відкрити в ілюстраторі чи інших векторних програмах. :)


5
Ви вже отримали SVG - навіщо ускладнювати його, додаючи крок у PDF?
Майкл Шумахер
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.