Экспорт изображений SVG с веб-страницы

Question

Я пытаюсь экспортировать lo go одного из наших партнеров в SVG. Их веб-сайт здесь .

lo go - это элемент, который выглядит следующим образом:

Я испробовал каждое решение, которое нашел на SO и Graphi c Design SE (установка Chrome плагинов типа SVG Crowbar , копирование и вставка HTML кода в файл ... et c) и пока ничего не получалось. Всякий раз, когда мне удавалось вставить код SVG в файл и переименовать его в «.svg», файл не открывался с помощью Illustrator.

Я также не нашел инструмента для проверки / устранения неполадок SVG-кодов (способ проверки HTML с помощью валидатора W3 C).

Как это векторное изображение можно извлечь как файл векторного изображения из кода веб-сайта? -

Answer 1

1. Щелкните правой кнопкой мыши на lo go и выберите «Inspect».
2. Откроется окно инструментов разработчика браузера с выделенным тегом <svg>.
3. Нажмите F2 , Это откроет этот тег в редакторе встроенных тегов.

4. Вы увидите, что SVG - это просто простая ссылка на символ SVG в другом месте в HTML

   <svg class="svg-icon icon-logo"><use xlink:href="#icon-logo"></use></svg>
   

5. Вам нужно найти этот символ. Если вы посмотрите дальше в HTML, вы увидите еще один элемент <svg>. Нажмите на маленькую стрелочку рядом с этим.

6. Вы увидите множество <symbol> тегов. Найдите тот с помощью id="icon-logo".
7. Выберите тот и снова нажмите F2
8. Выберите весь <symbol>, включая содержимое, используя Ctrl-A (Cmd-A на Ma c)
9. Скопируйте и вставьте весь символ в текстовый редактор
10. Измените <symbol на <svg, а </symbol> в конце на </svg>

11. Чтобы он работал как автономный SVG, вам также необходимо добавить правильный атрибут xmlns:

    xmlns="http://www.w3.org/2000/svg"
    

12. Сохранить файл. Например. as lo go .svg

Теперь файл должен выглядеть следующим образом (я обрезал некоторые пути) :

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 191 33"><path d="M8.988 16.702a1.65 1.65 0 0 1-1.154-1.975l-1.15-.664..."></path></svg>