SVG
Перейти до навігації
Перейти до пошуку
Чтобы итоговый файл SVG был минимального размера и с ним было удобно работать вебмастеру, при работе с векторным изображением в Adobe Illustrator придерживайтесь следующих правил.
- Именуйте слои понятно (названием иконки) и удаляйте лишние слои.
- Делайте Artboard такого же размера, как и изображение:
Object→Artboards→Fit to Artwork Bounds. Исключение — если объект состоит не из контуров с заливкой, а из линий с заданной толщиной обводки — тогда обводка может выходить за пределы Artboard. В этом случае нужно подгонять размер векторного изображения под Artboard на глаз. - Упрощайте кривые
Object→Path→Simplify - Объединяйте контуры:
Window→Pathfinder(Ctrl-Shift-F9) →Unite - Необязательно: конвертируйте линии с толщиной обводки в контуры с заливкой:
Object→Expand…. Это делает SVG чуть более тяжелым и менее удобным для анимации, но более совместимым (одинаково отображающимся в разных браузерах и при разных размерах).
Сохраняйте из Adobe Illustrator в SVG через экспорт: File → Export → Export As….
В SVG Options выбирайте такие настройки:
- Styling: Internal CSS
- Object IDs: Layer Names
- Decimal: 1 — чем меньше значение, тем меньше размер файла (минимальное значение — 1); а чем больше, тем точнее расположение элементов.
- Если вебмастер потом будет править цвет или работать с анимацией — уберите галочку Minify. Код SVG станет чуть тяжелее, но будет более читабельным и удобным для работы.
https://jakearchibald.github.io/svgomg/
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");
Источник: https://codepen.io/tigt/post/optimizing-svgs-in-data-uris
Используем gulp-svg-sprite. Установить:
npm install --save-dev gulp-svg-sprite
Добавить в gulpfile.js:
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'));
Источники:
- Creating SVG Sprites using Gulp and Sass
- Automating SVG Sprites with Gulp
- A Gulp-Based External SVG Symbol Sprite Icon System
- URL-encoder для SVG
- SVGOMG — оптимизация SVG
- IcoMoon App — создание набора SVG иконок
- https://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/ - хорошая статья про повторное использование svg и решение проблем связанным с ним
- Structuring, Grouping, and Referencing in SVG — The<g>, <use>, <defs> and <symbol> Elements
- An Overview of SVG Sprite Creation Techniques ◆ 24 ways
- How to work with SVG icons