Как сохранить svg из браузера

Обновлено: 07.01.2025

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 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 javascript с помощью браузера, загружать этот файл в свою локальную файловую систему?

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

Это может быть возможно с помощью обычной команды браузера «Сохранить», но она не просто сохранит SVG-холст, но и всю страницу.

Я полагаю, что вам лучше всего использовать AJAX и отправлять все данные SVG XML в виде данных POST на серверный сценарий, и этот сценарий просто отправляет данные POST с заголовком Content-Disposition: attachment; filename=yourfile.svg .

(В PHP вы можете получить необработанное содержимое POST с помощью file_get_contents('php://input') .)

(1) Содержит (динамически генерируемый) SVG-контент на вашей HTML-странице, заключенный в div с уникальным идентификатором, например,

(2) Включите кнопку для вызова функции JavaScript, например,

(3) Включите функцию JavaScript, указанную в разметке вашей кнопки:

(4) Напишите серверное приложение, чтобы принять ваш почтовый запрос SVGtext и вернуться как image / svg + xml, используя Content-Disposition для указания вложения. Представлен рабочий код на трех языках, хотя я не программист на Perl и никогда не использовал PHP в гневе.

Я использовал жестко запрограммированное имя для изображения (image.svg), но на самом деле выбрал дескриптор динамического контента, который я генерирую со страницы (снова используя div и ID и document.getElementById('graphName').textContent ).

Это было протестировано на Mac Safari 9, Firefox 42, Chrome 47, Opera 34 и Windows7 / IE 11 и Windows10 / Edge, и в каждом случае загружается файл svg или один из них запрашивает его загрузку. Полученные файлы откроются, например, в. Adobe Illustrator или любое другое приложение, которое вы настроили для открытия файлов SVG.

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

Я сделал чистый / полезный букмарклет из предложений.

Он поместит уникальную ссылку рядом с каждым встроенным <svg> на странице.

Надеюсь, это кому-то поможет.

Чтобы ответить на мой собственный вопрос:

Другая возможность, хотя и не самая лучшая, - это отображение сериализованного содержимого на веб-странице и возможность выбора, копирования и вставки пользователем. Это после изучения решения Эли Грея.

Вы можете избежать поездки в оба конца на сервер.

Base64 кодирует ваш SVG XML.

Затем создайте ссылку на эти данные. Пользователь может щелкнуть правой кнопкой мыши, чтобы сохранить его локально.

Тег img работает в Webkit, ссылка работает в Webkit и Firefox и может работать в любом браузере, поддерживающем data-uri

В настоящее время у меня есть веб-сайт, использующий D3, и я бы хотел, чтобы у пользователя была возможность сохранить SVG в виде файла SVG. Я использую crowbar.js для этого, но он работает только на Chrome. С safari ничего не происходит, и IE дает отказ в доступе к методу click() , используемому в crowbar.js для загрузки файла.

Как загрузить файл SVG на основе элемента SVG на моем веб-сайте в Safari, IE и Chrome?

Есть 5 шагов. Я часто использую этот метод для вывода встроенного SVG.

получить встроенный элемент SVG для вывода.
получить исходный код svg с помощью XMLSerializer.
добавить пространства имен svg и xlink.
построить схему данных URL svg методом encodeURIComponent.
установите для этого URL-адреса атрибут href некоторого элемента «a» и щелкните правой кнопкой мыши эту ссылку, чтобы загрузить файл SVG.

Лучше всего использовать вместо этого hsl или hsla !

Я попробовал каждое решение здесь , и у меня ничего не получалось. Моя картинка всегда была меньше, чем у меня на холсте d3.js.

Мне пришлось установить холст width , height , а затем сделать clearRect на context , чтобы он работал. Вот моя рабочая версия

Функция экспорта:

Он использует FileSaver.js для сохранения файла.

Это мое создание холста, обратите внимание, что я решаю проблему с пространством имен здесь

Создание холста d3.js:

Пока на этот вопрос был дан ответ, я создал небольшую библиотеку под названием SaveSVG, которая может помочь сохранить сгенерированные файлы D3.js. SVG, которые используют внешние таблицы стилей или внешние файлы определений (используя <use> и def ) теги.

Чтобы этот фрагмент работал, вам нужен FileSaver.js.

Сочетая ответы Дэйва и Дефхи1977. Вот многоразовая функция:

Я знаю, что на этот вопрос уже дан ответ, и этот ответ хорошо работает большую часть времени. Однако я обнаружил, что он не работает в Chrome (но не в Firefox), если изображение svg имеет большой размер (около 1 МБ). Это работает, если вы вернетесь к использованию конструкции Blob , как описано здесь и здесь . Единственная разница - аргумент типа. В моем коде я хотел одним нажатием кнопки загрузить svg для пользователя, что я и сделал:

Виталий Однойко Евгений, с подпиской адоб даются шрифты и там можно на изи любые подключить, 90% что нужный шрифт там есть

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

В слайдах речь про фигму

Виталий Однойко ответил Евгению Евгений, при чем тут шрифты тогда начнем с этого? Я тебе на что ответил?

Виталий Однойко ответил Евгению

Vitaly, шрифт и свг контент зачастую лежат на сервере в одном месте и грузятся друг за другом )

Виталий Однойко ответил Евгению Евгений, ну и зачем грузить шрифт если этот шрифт в 1 клик с сайта адоб подключается в весь пакет адоба

Vitaly, не всем удобно облако в принципе
У некоторых облака адоби работают медленно или зарестрикчены фаерволами
Стоят денег
И вообще речь тут была не про подключение шрифтов, а про то как вытащить контент через инспектора.
Ты, конечно, молодец, что подписал криатив клауд, но это не имеет отношения к реверс инжинирингу от слова совсем )

Виталий Однойко ответил Евгению

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

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

Читайте также: