Как сохранить svg с сайта
Перейти к содержимому

Как сохранить svg с сайта

  • автор:

Сохранение SVG-файлов с веб-страницы: методы и инструменты

Сначала копируйте SVG, как было описано выше. Затем перейдите на сайт SVGOMG (https://jakearchibald.github.io/svgomg/), вставьте туда код SVG и скачайте оптимизированную версию. Это поможет получить максимально сжатый и эффективный файл SVG.

Использование инструментов браузера и расширений

Хотя инструменты разработчика в браузерах могут справиться с этой задачей, процесс можно упростить с помощью специальных расширений. Например, расширение SVG Export для Google Chrome значительно облегчит процедуру.

Прямое скачивание SVG через директории

Если путь к SVG-файлу указан в атрибуте src элемента, его можно скачать напрямую, используя данный URL. Этот метод гарантирует сохранение изображения в высоком качестве.

Избегание потери качества

Не рекомендуется сохранять SVG за счет скриншотов, так как это приводит к ухудшению качества и снижает его масштабируемость. Лучше загружать файлы SVG напрямую.

Доступ к SVG для личного использования

Чтобы лучше понять механику скачивания SVG, можно попрактиковаться на примерах, используя демонстрационные ссылки, например, со страницы иконок Salesforce.

Экспорт SVG в PDF при необходимости

Пользователи Chrome могут сохранять SVG в формате PDF и извлекать векторные элементы через Adobe Illustrator. Это актуально при работе со сложной графикой.

Визуализация

Процесс извлечения файла SVG со страницы веб-сайта:

Как сохранить svg с сайта

Как правильно сохранить SVG, так, чтобы использование векторного изображения на сайте оправдывало себя не только с эстетической стороны, но и было практичным, в отношении веса изображения?

В чем работать с векторной графикой?

В основном, дизайнеры используют в работе векторные графические пакеты Sketch, Illustrator. Значительно реже идут в ход профориентированные под работу с SVG графические пакеты, такие как например Inkscape.

Подробонее про графические пакеты и js-библиотеки:

  • Top 15 Free SVG Tools for Graphic & Web Designers
  • MDN: Tools for SVG

Чем симпатичен SVG?

При целевом использовании SVG позволяет:

  • минимизировать размер файла с изображением логотипа / иконки / иллюстрации;
  • разместить элемент, который при соблюдении пропорций сторон, не чувствителен к размеру отображения
  • применить к фрагментам различные стили средствами CSS (цвет, градиент и прочее)
  • добавить интерактива и анимации за счет применения возможностей CSS и JS

Примером может являться цикл разрабатываемых нами интерактивных заставок для веб-ресурсов ежегодного фестиваля Solar Systo Togathering:

  • 2015.solarsysto.ru
  • 2016.solarsysto.ru
  • 2017.solarsysto.ru

Итак, у нас есть некий векторный файл в AI

Рассмотрим частный и особо частый случай сохранения из Adobe Illustrator.

Сразу нужно отметить, что для целей веб-разработки, в основном, вставка в файл растровых изображений не требуется, но SVG формат такую возможность поддерживает. Поэтому нужно проверить, не затесался ли где-то растровый слой или слой с эффектом из иллюстратора, который преображается в растр при сохранении в SVG. Это будет видно в структуре кода SVG файла или в прилинкованных файлах сохраняющихся вместе с SVG файлом (об этом подробнее в пункте 5).

Обо всём по порядку:

1. Открываем файл

Открывем файл в Adobe Illustrator:

image

Насколько мы видим у него есть лишние белые поля по всем сторонам. Так что первым делом мы:

2. Убираем лишние поля

image

3. Оптимизируем вектор в иллюстраторе

Сливаем массу слоев в минимальное количество, убирая группы. Взаимосвязанные слои, представляющие собой единый объект, стремимся склеить, а при необходимости — вырезать друг из друга.

image

image

4. Сохраняем: File / Save As

В общем списке форматов находим SVG, выбираем его, а так же берем на заметку то, что там есть еще и SVGZ (сжатый файл, еще меньше по размеру, без потери качества).

image

5. Знакомимся с диалоговым окном сохранения

image

  • SVG Profiles
    По умолчанию используется SVG 1.1
  • Fonts
    Type / Convert to outlines — что означает «перевести в кривые», то, что нам и нужно, при этом селект Subsetting становится недоступным для изменения.
    Type / SVG — Нужен в случае, если в SVG встраивается текст
    Type / Subsetting — Позволяет указать включаемый набор символов с целью дальнейшей возможности редактирования текста в режиме исходного кода и представления его графически при отображении SVG файла.
  • Options
    Image Location / Embed — при наличии растровых изображений позволит включить их в состав SVG файла
    Image Location / Link — при наличии растровых изображений положит их рядом с файлом в той же папке, указав в SVG файле ссылку на них. Если в данном случае убрать изображение включаемое, то SVG файл перестанет корректно отображаться.
    Preserve Illustrator Capabilities — галочка, предполагающая последующую возможность редактирования файла в иллюстраторе
  • More options
    Трогать для решения наших задач необязательно.
  • SVG Code
    Замечательная кнопка, позволяющая просмотреть SVG файл в текстовом формате сразу.

При выбранном Image Location / Embed:

По структуре кода можно даже совершенно не профессиональным взглядом выявить вставки растровой графики.

Всё дело в том, что в SVG очень четко виден принцип описательной части векторной формы в XML формате. В то же время, код растрового изображения визуальному анализу никак не поддается.

Пример, с 666 строки идет растровая дичь, абсолютное зло в нашем случае:

image

При выбранном Image Location / Link:

В коде будет менее заметная вставка, например:

Поэтому желательно просматривать именно в режиме Image Location / Embed!

Если в файле оказался растровый фрагмент, то его рекомендуется ликвидировать, перерисовав растровый слой в векторе. Это значительно уменьшит размер файла и позволит не потерять качества при масштабировании.

6. Иконка планеты

Открывает SVG файл для просмотра в браузере установленном основным по умолчанию.

7. На выходе получаем SVG или SVGZ файл

Формат: Без оптимизации векторной формы в иллюстраторе * С учетом оптимизации векторной формы в иллюстраторе *
SVG 36 813 bytes 35 941 bytes
SVGZ 15 310 bytes 15 214 bytes

Вроде бы разница не велика, но это еще не конец процедуры.

Дальнейшие действия по оптимизации файла

Важно отметить, что полученный на выходе файл при этом содержит большое количество сносок, комментариев, пробелов, переносов, свойств, которые совершенно не являются обязательными.

Как скачать SVG картинку?

Убрать из ссылки image/svg+xml (или заменить на text/plain ) — будет показана страница с исходным кодом SVG, — сохранить её в файл или, если браузер не позволяет (иначе можно было бы просто открыть и сохранить исходную ссылку), скопировать содержимое страницы и вставить в текстовый редактор.

Ответ написан более трёх лет назад
Комментировать
Нравится 4 Комментировать

Dan_Stanly

Дмитрий Чайников @Dan_Stanly
Не задавайте вопросы на которые не знаете ответов

5c618eb0719ed410432171.jpeg

На странице с картинкой нажмите F12, для перехода в режим разработчика. В появившемся дополнительном окне найдите следующее (см. скриншот):

Наведите на картинку курсор мышки и нажмите правую клавишу, выберите «Скачать как. «

Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
mikhailteplov @mikhailteplov

Используйте расширения для гугл хрома, например svg grabber или подобное, их много. Позволяют скачать все svg в 1 клик

Правильный экспорт SVG

Подготовка документа для анимации — важный этап, к которому нельзя относиться пренебрежительно, так как это может обернуться весьма неприятными последствиями. Давайте рассмотрим, какие существуют особенности экспорта SVG в Adobe Illustrator.

В данной заметке мы не будем учить, как лучше всего рисовать в Illustrator. Но скажем полезную вещь: при отрисовке фигур очень важно следить за значениями, причем весьма желательно, чтобы они имели только одно число после запятой, а в идеале — вообще были целыми. Конечно, совсем не обязательно всегда следовать этому правилу, однако если вы будете это делать, то имейте в виду, что в результате:

  • уменьшится размер файла,
  • упростится дальнейшая анимация,
  • визуально сократится объем информации.

1-20219-1e1e5a.png

В нем реализована одна и та же кривая, однако в 1-м случае мы видим одну цифру после запятой, тогда как во 2-м их три. Сама кривая состоит всего из четырех точек, причем обратите внимание, что 2-й пример на одну треть длиннее 1-го. А теперь представьте, насколько больше места займет кривая, если она будет состоять из 20-ти точек.

Хорошо, каркас мы нарисовали, теперь хотим сохранить изображение в качестве SVG-файла. У нас существуют для этого 2 пути:

  • «Сохранить как»;
  • «Экспортировать как».

Какой из них лучше? Мы рекомендуем первый: «Сохранить как». Почему, если на первый взгляд никакой разницы нет, ведь мы и так, и эдак получим файл с изображением и с расширением .svg? Однако отличия есть, и начинаются они еще на этапе параметров экспорта.

z1aijt1cwfmvoca1_saqybvspts_1-20219-d14648.png

Очевидно, что в случае с вариантом «Сохранить как» мы имеем гораздо больше настроек, что уже является весомым аргументом для использования именно этого варианта. Однако продолжим.

Если мы откроем файлы, которые сохранены 2-мя способами в веб-браузере, то не увидим разницы, но только на первый взгляд. Но ведь нас больше интересует не внешний вид, а начинка, поэтому лучше всего выполнить открытие через текстовый редактор. И вот здесь отличия станут более очевидными. Впрочем, лучше попробуйте выполнить это сами, что позволит вам сделать однозначные выводы.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *