Romych: /* Ссылки */

2020-08-18T11:40:59Z

Ссылки

Нова сторінка

* [[Эффекты SVG]]

== Как делать SVG в Adobe Illustrator ==

Чтобы итоговый файл SVG был минимального размера и с ним было удобно работать вебмастеру, при работе с векторным изображением в Adobe Illustrator придерживайтесь следующих правил.

# Именуйте слои понятно (названием иконки) и удаляйте лишние слои.
# Делайте Artboard такого же размера, как и изображение: <code>Object</code> → <code>Artboards</code> → <code>Fit to Artwork Bounds</code>. Исключение — если объект состоит не из контуров с заливкой, а из линий с заданной толщиной обводки — тогда обводка может выходить за пределы Artboard. В этом случае нужно подгонять размер векторного изображения под Artboard на глаз.
# Упрощайте кривые <code>Object</code> → <code>Path</code> → <code>Simplify</code>
# Объединяйте контуры: <code>Window</code> → <code>Pathfinder</code> (<kbd>Ctrl</kbd>-<kbd>Shift</kbd>-<kbd>F9</kbd>) → <code>Unite</code>
# Необязательно: конвертируйте линии с толщиной обводки в контуры с заливкой: <code>Object</code> → <code>Expand…</code>. Это делает SVG чуть более тяжелым и менее удобным для анимации, но более совместимым (одинаково отображающимся в разных браузерах и при разных размерах).

Сохраняйте из Adobe Illustrator в SVG через экспорт: <code>File</code> → <code>Export</code> → <code>Export As…</code>.<br>В <code>SVG Options</code> выбирайте такие настройки:

* Styling: '''Internal CSS'''
* Object IDs: '''Layer Names'''
* Decimal: '''1''' — чем меньше значение, тем меньше размер файла (минимальное значение — 1); а чем больше, тем точнее расположение элементов.
* Если вебмастер потом будет править цвет или работать с анимацией — уберите галочку '''Minify'''. Код SVG станет чуть тяжелее, но будет более читабельным и удобным для работы.

[[Файл:Svg-AI.png|центр]]

== Оптимизация SVG файлов ==

https://jakearchibald.github.io/svgomg/

== Шаблон оптимизированного URL-encoded SVG ==

<source lang="css">
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M224%20387.814V512L32 320l192-192v126.912C447.375 260.152 437.794 103.016 380.93 0 521.287 151.707 491.48 394.785 224 387.814z'/%3E%3C/svg%3E");
</source>

Источник: https://codepen.io/tigt/post/optimizing-svgs-in-data-uris

== Настройка Gulp для создания SVG спрайтов ==

Используем [https://github.com/jkphl/gulp-svg-sprite gulp-svg-sprite]. Установить:

<source lang="bash">
npm install --save-dev gulp-svg-sprite
</source>

Добавить в <code>gulpfile.js</code>:

<source lang="javascript">
var gulp = require('gulp'),
svgSprite = require('gulp-svg-sprite');

gulp.src('path/to/assets/*.svg')
.pipe(svgSprite( /* ... Insert your configuration here ... */ ))
.pipe(gulp.dest('out'));
</source>

Источники:

* [https://www.liquidlight.co.uk/blog/article/creating-svg-sprites-using-gulp-and-sass/ Creating SVG Sprites using Gulp and Sass]
* [https://www.foreach.be/automating-svg-sprites-with-gulp Automating SVG Sprites with Gulp]
* [https://una.im/svg-icons/ A Gulp-Based External SVG Symbol Sprite Icon System]

== Ссылки ==

* [https://yoksel.github.io/url-encoder/ru/ URL-encoder для SVG]
* [https://jakearchibald.github.io/svgomg/ SVGOMG] — оптимизация SVG
* [https://icomoon.io/app/#/select IcoMoon App] — создание набора SVG иконок
* https://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/ - хорошая статья про повторное использование svg и решение проблем связанным с ним
* [http://www.sarasoueidan.com/blog/structuring-grouping-referencing-in-svg/ Structuring, Grouping, and Referencing in SVG — The<g>, <use>, <defs> and <symbol> Elements]
* [https://24ways.org/2014/an-overview-of-svg-sprite-creation-techniques/ An Overview of SVG Sprite Creation Techniques ◆ 24 ways]
* [https://fvsch.com/code/svg-icons/how-to/ How to work with SVG icons]

=== Adobe Illustrator ===

* [http://creativedroplets.com/export-svg-for-the-web-with-illustrator-cc/ Export SVG for the web with Illustrator CC]
* [https://graphicdesign.stackexchange.com/questions/80636/export-settings-for-svg-image-in-illustrator Export settings for SVG image in Illustrator]

SVG - Історія редагувань

Romych: /* Ссылки */