Практическое руководство о SVG в вебе
Подготовка SVG для использования в вебе это очень простой процесс, не сложнее экспорта JPEG или PNG. Используйте любой привычный для вас графический редактор (Illustrator, Sketch, Inkscape [бесплатен], и тому подобное [или даже Photoshop, если вы используете слои с формами]) с тем размером изображения, который вы планируете использовать. Обычно я работаю в Иллюстраторе, поэтому я объясню некоторые способы подготовки файлов в этой программе, но вообще они применимы и для любой другой программы. Вам, возможно, стоит перевести текст в кривые, поскольку шрифт, скорее всего, будет неправильно отображаться, если, конечно, вы не планируете стилизовать их с помощью веб-шрифта, используемого на странице (что возможно!). Не стоит также превращать все объекты в единые формы, особенно если у вас есть обводка, которой необходимо будет управлять на странице, тем более преобразование объектов зачастую не уменьшает размер файла. Любые имена, присвоенные группам или слоям, будут добавлены к SVG как ID элемента. Это довольно удобно для стилизации, но немного увеличит общий размер файла.
Перед тем как сделать экспорт, необходимо проверить, все ли изображения находятся в целочисленной пиксельной сетке (то есть, например не 23.3px × 86.8px). В противном случае скорее всего изображению не будет хватать чёткости и часть изображения обрежется. В Иллюстраторе это можно сделать следующим образом: Object > Artboards > Fit to Artwork Bounds. Затем жмём save as и выбираем SVG, и оставляем настройки по умолчанию. Здесь можно сделать небольшую оптимизацию, но на самом деле не стоит, так как далее мы будем применять разные улучшающие приёмы, поэтому сейчас мы не будем тратить впустую время на эти настройки.
Приёмы для уменьшения размеров файла.
(Смотрите ресурсы по оптимизации)
Существует множество статей по оптимизации SVG, предлагающих кладезь знаний в этой теме, но я хочу поделиться парой приёмов, которые считаю наиболее эффективными и полезными. Они не требуют много усилий и могут легко вписаться в рабочий процесс.
Чтобы добиться наименьшего размера SVG, логично будет удалить из него всё лишнее. Наиболее известная и полезная программа (по крайней мере я так думаю) для обработки SVG это SVGO. Она удаляет весь не нужный код. Но! Будьте внимательны используя эту программу, если планируете управлять SVG при помощи CSS / JS, так как она может слишком сильно почистить код, что затруднит дальнейшие изменения. Удобство SVGO ещё и в том, что её можно включить в процесс автоматической сборки проекта, но можно также использовать GUI если хочется.
Разбираясь подробнее с правильным удалением всего ненужного, мы можем сделать ещё кое-что в графическом редакторе. Сперва нужно убедиться, что используется настолько мало контуров/форм, насколько это возможно, так же как и точек на этих контурах. Можно объединять и упрощать всё, что поддаётся упрощению, и удалить все ненужные точки. В Иллюстраторе есть плагин VectorScribe с инструментом
Предварительная оптимизация
Smart Remove Brush Tool удалил точки
Дальше будем увеличивать изображение. В Иллюстраторе удобно включить просмотр с пиксельной сеткой View > Pixel Preview и проверить, как располагаются контуры. Чтобы разместить контуры по сетке, потребуется немного времени, но эти усилия окупятся и позволят добиться более чёткого рендеринга (лучше обратить на это внимание заранее).
Точки вне сетки
Выравнивание по сетке
Если есть два и более объекта для выравнивания, то стоит удалить все ненужные перекрытия. Иногда даже если контуры тщательно выровнены, может быть видна тонкая белая линия. Чтобы предотвратить такое, можно немного наложить объекты друг на друга в местах перекрытия. Важно: в SVG z-index имеет определённый порядок, который зависит от объекта, находящегося снизу, поэтому стоит поместить верхний объект в нижнюю часть файла в коде.
И, наконец, последнее, но немаловажное, то, о чём обычно забывают — это активировать gzip сжатие SVG на вашем сайте в .htaccess файле.
AddType image/svg+xml svg svgz
<IfModule mod_deflate.c>
<IfModule mod_filter.c>
AddOutputFilterByType DEFLATE "image/svg+xml" \
"text/css" \
"text/html" \
"text/javascript"
... etc
</IfModule>
</IfModule>В качестве примера того, насколько эффективна эта техника, я воспользуюсь оригинальным логотипом Breaking Borders и оптимизирую его таким образом: увеличиваю размер до того, каким он должен быть; приведу в порядок контуры; удалю максимально возможное количество точек; передвину точки на целочисленные пиксели; сдвину все области перекрытий и отправлю это всё в SVGO.
Оригинал: 1,413b
После оптимизации: 409b
В итоге размер файла стал меньше на ~71% (и на ~83% при сжатии)
Дополнение: Rob Sterlini заметил, поскольку «b» повторяется, можно использовать элемент <use>, для повторения, что ещё больше уменьшит размер файла — и был абсолютно прав.
После оптимизации с использованием <use>: 311b
Размер файла стал меньше на ~78%
Если применить эту технику ко всем файлам SVG, это значительно улучшит ваш сайт.
Описание и примеры стандартных функций SVG
Доминирующей причиной появления этого блога стало незаслуженное забвение на целых десять лет языка разметки масштабируемой векторной графики – SVG (Scalable Vector Graphics), входящего в подмножество расширяемого языка разметки XML.
Стандарт SVG 1.0 был принят в качестве спецификации Консорциумом Всемирной паутины (W3C) в сентябре 2001 г. Стандарт SVG 1.1 и его версии SVG mobile profiles (SVG Basic and SVG Tiny) были приняты консорциумом в качестве рекомендации в январе 2003 г.
Сейчас ведутся работы по созданию стандарта SVG 2.0
Основные преимущества формата SVG.
Я не буду долго распространяться о преимуществах векторной графики перед растровой в вебдизайне, замечу лишь, что, однажды созданный, файл в формате SVG одинаково хорошо выглядит без потери качества и на мобильном устройстве и на станционарном мониторе домашнего ПК.
Шапка данного сайта выполнена в формате SVG, попробуйте уменьшить окно браузера до минимальных размеров, картинка на “лету” будет также пропорционально уменьшаться.
SVG – это двухмерная графика и тем не менее это текстовый формат, который можно легко править в блокноте или просто рисовать в векторных редакторах: Incscape , Adobe illustrator, CorelDRAW
Бесконечное полотно документа svg.
Итак, как происходит формирование векторного изображения.
Документ формата SVG – это двухмерный объект, который может иметь бесконечные координаты, как в положительном, так и в отрицательном направлении по осям X и Y. Также документ SVG имеет две области просмотра:
При уменьшении размера пользовательского окна просмотра viewbox можно пропорционально увеличивать фрагмент изображения в системной области просмотра или уменьшать его при увеличении размера viewbox.
Таким образом реализуется эффект лупы. Более подробно эти процессы разобраны в статье: Трансформация изображений SVG при изменении параметров Viewbox.
Взаимодействие SVG, XML с HTML, CSS, Jscript
В SVG, как и в HTML можно добавлять ссылки на внешние ресурсы. Но если в HTML одна картинка может служить только для одной внешней ссылки, то в SVG документ можно добавлять сколько угодно внешних ссылок . Картинка кликабельна.
Внутрь HTML страницы легко встраивается код SVG документа или целиком подключается внешний SVG файл. Можно наоборот, внутри SVG файла разместить код HTML внутри тегов foreignObject. Получаются интересные эффекты: Внутри SVG файла находится работающий внешний HTML сайт. К SVG формату можно подключать внешние таблицы стилей CSS 2.0, что позволяет управлять сразу несколькими файлами *.svg. Также вполне допустимо подключение стилей внутри файла *.svg внутри тегов style или использовать внутренние стили непосредственно внутри командных строк фигур и путей.
SVG, как любой основанный на XML формат, позволяет использовать для его обработки таблицы трансформации (XSLT).
Анимация и интерактивность SVG.
Анимация в SVG осуществляется при помощи языка SMIL (Synchronized Multimedia Integration Language). Также поддерживаются скриптовые языки на основе спецификации ECMAScript — это встраиваемый расширяемый язык программирования.
То есть всё находится в одном месте, внутри документа SVG, поэтому нет необходимости для подключения внешних библиотек.
На каждую отдельную фигуру или на целое изображение можно установить обработчик событий (клик, наведение мышки, нажатие клавиши и т.д), таким образом, пользователь может управлять рисунком. Наведите курсор мышки на кнопку“Start” на примере слева.
По событию mouseover на этой кнопке начнется анимация по команде begin=”startButton.mouseover” – движение цветных шариков по криволинейному пути. Закончится анимация либо через заданные в коде 16 секунд, либо в любой момент по наведению курсора мышки на цветные радиокнопки “Stop”. При этом каждая радиокнопка управляет своим объектом совпадающим по цвету. На рисунке ниже анимация начинается и заканчивается при нажатии клавиши мышки на кнопки GO и STOP. В этом случае работает событие click. Команда на запуск анимации – begin=”gO.click” и соответственно остановка – end=”stop.click”
Уже встроенные в SVG языки программирования позволяют реализовать довольно сложные сценарии анимации. Но, в дополнение к этому есть еще более мощные средства для реализации интерактивности графики и ее анимации – это внешние библиотеки сторонних разработчиков: D3.js, BonsaiJS, Svg.js, Snapsvg.js
Еще примеры анимации ⇛
Недостатки SVG формата
- С увеличением количества мелких деталей в изображении, быстрее растёт размер файла SVG-данных. Предельный случай — когда изображение представляет собой белый шум. В этом случае SVG не только не даёт никаких преимуществ в размере файла, но даже имеет проигрыш по отношению к растровому формату. На практике, SVG становится невыгоден уже задолго до того, как изображение дойдёт до стадии белого шума.
- Трудность использования в крупных картографических приложениях из-за того, что для правильного отображения маленькой части изображения документ необходимо прочитать целиком.
- В настоящее время SVG формат применяется в Интернете сравнительно мало, из-за недостаточной кроссбраузерности. Лучше всего обстоят дела у Mozilla Firefox со встроенным просмотрщиком SVG, так как ее разработчики находятся в рабочей группе Консорциума Всемирной паутины (W3C) по разработке и внедрению стандарта SVG. Хуже всего дела по поддержке формата SVG у Microsoft, которая покинула группу 2003 г. Для Internet Explorer – необходим Adobe SVG Viewer (ASV). С 9 версии IE частично поддерживает функции SVG.
Браузеры Apple Safari, Google Chrome намного лучше поддерживают SVG, но не полностью, так как SVG – это большая спецификация (вдвое больше HTML 4.01), именно поэтому разработчики браузеров внедряют функции постепенно, от версии к версии. Но абсолютно все разработчики современных браузеров заявляют, что за форматом SVG будущее в области графики вебдизайна.
UPD. Добавлен новый раздел онлайн генераторы SVG кода path.
следующая: Структура SVG документа ⇛
Как работает SVG ID? — WebBeaver.ru
Я много рассказывал о теге <use> в SVG и использовал его для вывода иконок. Прелесть в том, что с помощью <use> можно ссылаться на часть SVG и выводить только её. Это позволяет использовать схему «много изображений за один запрос, потому что это суперэффективно», которую раньше решали с помощью CSS-спрайтов и иконочных шрифтов.
Но <use> — это инлайновый SVG. Он не поможет, если вы хотите использовать часть SVG в теге <IMG> или в background-image. Вот тут и появляются идентификаторы фрагментов.
Подготовка SVG-спрайта
Один из способов — привести SVG (давайте называть его просто «спрайт») к виду обычного CSS-спрайта.
Мы специально делаем это именно так, чтобы потом быть в состоянии использовать значения viewBox, для вывода отдельных фрагментов, как мы привыкли это делать в обычных спрайтах.
В этом небольшом демо-спрайте используется три иконки. Каждая иконка имеет размер 32×32. Весь спрайт — 32×96. Давайте посмотрим, каким будет viewBox для отдельных частей спрайта:
| ViewBox всего спрайта | 0 0 32 96 |
| ViewBox первой иконки | 0 0 32 32 |
| ViewBox второй иконки | 0 32 32 32 |
| ViewBox третьей иконки | 0 64 32 32 |
Атрибуты viewBox указывают на координаты начала слева, координаты начала сверху, ширину и высоту. Обратите внимаение, что каждый раз позиция начала сверху сдвигается на 32. Мы просто показываем другую часть спрайта.
Добавление viewBox в сам SVG
Вы можете указать эти значения viewBox для каждого элемента <view>, внутри SVG.
<view viewBox="0 0 32 32" />
<view viewBox="0 32 32 32" />
<view viewBox="0 64 32 32" />Теперь мы можем использовать эти части в других местах. Элементы <view> могут быть самостоятельными, как в примере выше, или могут оборачивать другие элементы. В этом случае viewBox отобразится, если совпадает ID.
<!-- Этот viewBox отобразится, если идентификатор будет #match-me. -->
<view viewBox="0 64 32 32">
<rect ...>
</view>Демо в спецификации.
Синтаксис в HTML
Применять значения viewBox в SVG-вставленном-как-IMG вы можете следующим образом:
<!-- top icon -->
<img src="sprite.svg#svgView(viewBox(0, 0, 32, 32))" alt="">Или, если вы уже настроили view-элементы, то можете ссылаться на них по ID:
<!-- middle icon -->
<img src="sprite.svg#icon-heart-view" alt="">Синтаксис в CSS
Вы можете указывать требуемое значение viewBox прямо в пути к изображению в CSS
.icon-clock {
background: url("sprite.svg#svgView(viewBox(0, 0, 32, 32))") no-repeat;
}Или, опять же, ссылаться на них по ID:
.icon-clock {
background: url(sprite.svg#icon-clock-view) no-repeat;
}Хотя… Если вы используете SVG-спрайт таким образом и у вас пошло что-то не так, то вы можете просто использовать способ из обычных спрайтов:
.icon-heart {
background: url("sprite.svg") no-repeat;
background-size: 32px 96px;
background-position: 0 -32px;
}Я хочу складывать иконки друг на друга
Если у всех иконок одинаковый viewBox и вы хотите просто показывать и скрывать их, когда это необходимо, то это может быть чуть легче.
Поместите их все в одно место (или используйте какой-нибудь сборщик). Вот, я кладу каждую иконку в группу и указывают уникальный ID.
Трюк с отображением нужной иконки заключается в том, чтобы скрыть все иконки и отобразить ту, чей ID совпадает с указанным. Это всё можно сделать на CSS, потому что у нас есть псевдокласс :target.
SVG со всем этим будет выглядеть так:
<defs>
<style>
g {
display: none;
}
g:target {
display: inline;
}
</style>
</defs>
<g>
<path d="M20.6,23.3L14,16.7V7.9h5v7.2l5.4,5.4L20.6,23.3z M16-0.1c-8.8,0-16,7.2-16,16s7.2,16,16,16s16-7.2,16-16S24.8-0.1,16-0.1z
M16,27.9c-6.6,0-12-5.4-12-12s5.4-12,12-12s12,5.4,12,12S22.6,27.9,16,27.9z"/>
</g>
<g>
<path d="M32,11.2c0,2.7-1.2,5.1-3,6.8l0,0L19,28c-1,1-2,2-3,2s-2-1-3-2L3,18c-1.9-1.7-3-4.1-3-6.8C0,6.1,4.1,2,9.2,2
c2.7,0,5.1,1.2,6.8,3c1.7-1.9,4.1-3,6.8-3C27.9,1.9,32,6.1,32,11.2z"/>
</g>
<g>
<path d="M32,15.9l-16-16v10H0v12h26v10L32,15.9z"/>
</g>Поддержка браузеров
Можно посмотреть поддержку в Can I Use, но не всё так просто, потому что некоторые браузеры поддерживают только использование идентификаторов в HTML, а у некоторых какие-то проблемы.
Это моя тестовая страница:
See the Pen SVG Fragment Identifiers in HTML and CSS by Chris Coyier (@chriscoyier) on CodePen.
Вот основные моменты поддержки браузеров, которые я могу отметить:
- В Firefox всё работает правильно.
- В IE11 тоже. У IE 9 и 10 небольшие проблемы с background-position, но, в целом, всё неплохо.
- В последних Chrome/Opera всё работает.
- Единственное что работает в iOS 8.1 — это ссылка на view внутри img.
- Для Android 4.4 подходит только background-position (который вообще не использует идентификаторы). В Android 5 всё нормально.
Как вставить svg картинку на свой сайт
Рассмотрим способы вставки SVG изображений: через тег img, инлайново, base64, теги object и embed; а также как вставить SVG картинку через CSS.Вставка SVG в HTML
SVG через тег img
SVG data URI / base64
SVG через тег object
Вставка SVG через CSSSVG через свойство background
Вставка SVG в HTML
SVG через тег img
<img src="myImage.svg" alt="myImage">Inline SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54">
<g>
<path d="M27,8c-9.374,0-17,7.626-17,17c0,7.112,4.391,13.412,11,15.9V50c0,0.553,0.447,1,1,1h2v2c0,0.553,0.447,1,1,1h6
c0.553,0,1-0.447,1-1v-2h2c0.553,0,1-0.447,1-1v-9.1c6.609-2.488,11-8.788,11-15.9C44,15.626,36.374,8,27,8z M30,49
c-0.553,0-1,0.447-1,1v2h-4v-2c0-0.553-0.447-1-1-1h-1v-5h8v5h40z M31.688,39.242C31.277,39.377,31,39.761,31,40.192V42h-8v-1.808
c0-0.432-0.277-0.815-0.688-0.95C16.145,37.214,12,31.49,12,25c0-8.271,6.729-15,15-15s15,6.729,15,15
C42,31.49,37.855,37.214,31.688,39.242z"/>
<path d="M27,6c0.553,0,1-0.447,1-1V1c0-0.553-0.447-1-1-1s-1,0.447-1,1v4C26,5.553,26.447,6,27,6z"/>
<path d="M51,24h-4c-0.553,0-1,0.447-1,1s0.447,1,1,1h5c0.553,0,1-0.447,1-1S51.553,24,51,24z"/>
<path d="M7,24h4c-0.553,0-1,0.447-1,1s0.447,1,1,1h5c0.553,0,1-0.447,1-1S7.553,24,7,24z"/>
<path d="M43.264,7.322l-2.828,2.828c-0.391,0.391-0.391,1.023,0,1.414c0.195,0.195,0.451,0.293,0.707,0.293
s0.512-0.098,0.707-0.293l2.828-2.828c0.391-0.391,0.391-1.023,0-1.414S43.654,6.932,43.264,7.322z"/>
<path d="M12.15,38.436l-2.828,2.828c-0.391,0.391-0.391,1.023,0,1.414c0.195,0.195,0.451,0.293,0.707,0.293
s0.512-0.098,0.707-0.293l2.828-2.828c0.391-0.391,0.391-1.023,0-1.414S12.541,38.045,12.15,38.436z"/>
<path d="M41.85,38.436c-0.391-0.391-1.023-0.391-1.414,0s-0.391,1.023,0,1.414l2.828,2.828c0.195,0.195,0.451,0.293,0.707,0.293
s0.512-0.098,0.707-0.293c0.391-0.391,0.391-1.023,0-1.414L41.85,38.436z"/>
<path d="M12.15,11.564c0.195,0.195,0.451,0.293,0.707,0.293s0.512-0.098,0.707-0.293c0.391-0.391,0.391-1.023,0-1.414l-2.828-2.828
c-0.391-0.391-1.023-0.391-1.414,0s-0.391,1.023,0,1.414L12.15,11.564z"/>
<path d="M27,13c-6.617,0-12,5.383-12,12c0,0.553,0.447,1,1,1s1-0.447,1-1c0-5.514,4.486-10,10-10c0.553,0,1-0.447,1-1
S27.553,13,27,13z"/>
</g>
</svg>SVG data URI / base64
<img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDU0IDU0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1NCA1NDsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+CjxnPgoJPHBhdGggZD0iTTI3LDhjLTkuMzc0LDAtMTcsNy42MjYtMTcsMTdjMCw3LjExMiw0LjM5MSwxMy40MTIsMTEsMTUuOVY1MGMwLDAuNTUzLDAuNDQ3LDEsMSwxaDF2MmMwLDAuNTUzLDAuNDQ3LDEsMSwxaDYgICBjMC41NTMsMCwxLTAuNDQ3LDEtMXYtMmgxYzAuNTUzLDAsMS0wLjQ0NywxLTF2LTkuMWM2LjYwOS0yLjQ4OCwxMS04Ljc4OCwxMS0xNS45QzQ0LDE1LjYyNiwzNi4zNzQsOCwyNyw4eiBNMzAsNDkgICBjLTAuNTUzLDAtMSwwLjQ0Ny0xLDF2MmgtNHYtMmMwLTAuNTUzLTAuNDQ3LTEtMS0xaC0xdi01aDh3NUgzMHogTTMxLjY4OCwzOS4yNDJDMzEuMjc3LDM5LjM3NywzMSwzOS43NjEsMzEsNDAuMTkyVjQyaC04di0xLjgwOCAgIGMwLTAuNDMyLTAuMjc3LTAuODE1LTAuNjg4LTAuOTVDMTYuMTQ1LDM3LjIxNCwxMiwzMS40OSwxMiwyNWMwLTguMjcxLDYuNzI5LTE1LDE1LTE1czE1LDYuNzI5LDE1LDE1ICAgQzQyLDMxLjQ5LDM3Ljg1NSwzNy4yMTQsMzEuNjg4LDM5LjI0MnoiIGZpbGw9IiMwMDAwMDAiLz4KCTxwYXRoIGQ9Ik0yNyw2YzAuNTUzLDAsMS0wLjQ0NywxLTFWMWMwLTAuNTUzLTAuNDQ3LTEtMS0xcy0xLDAuNDQ3LTEsMXY0QzI2LDUuNTUzLDI2LjQ0Nyw2LDI3LDZ6IiBmaWxsPSIjMDAwMDAwIi8+Cgk8cGF0aCBkPSJNNTEsMjRoLTRjLTAuNTUzLDAtMSwwLjQ0Ny0xLDFzMC40NDcsMSwxLDFoNGMwLjU1MywwLDEtMC40NDcsMS0xUzUxLjU1MywyNCw1MSwyNHoiIGZpbGw9IiMwMDAwMDAiLz4KCTxwYXRoIGQ9Ik03LDI0SDNjLTAuNTUzLDAtMSwwLjQ0Ny0xLDFzMC40NDcsMSwxLDFoNGMwLjU1MywwLDEtMC40NDcsMS0xUzcuNTUzLDI0LDcsMjR6IiBmaWxsPSIjMDAwMDAwIi8+Cgk8cGF0aCBkPSJNNDMuMjY0LDcuMzIybC0yLjgyOCwyLjgyOGMtMC4zOTEsMC4zOTEtMC4zOTEsMS4wMjMsMCwxLjQxNGMwLjE5NSwwLjE5NSwwLjQ1MSwwLjI5MywwLjcwNywwLjI5MyAgIHMwLjUxMi0wLjA5OCwwLjcwNy0wLjI5M2wyLjgyOC0yLjgyOGMwLjM5MS0wLjM5MSwwLjM5MS0xLjAyMywwLTEuNDE0UzQzLjY1NCw2LjkzMiw0My4yNjQsNy4zMjJ6IiBmaWxsPSIjMDAwMDAwIi8+Cgk8cGF0aCBkPSJNMTIuMTUsMzguNDM2bC0yLjgyOCwyLjgyOGMtMC4zOTEsMC4zOTEtMC4zOTEsMS4wMjMsMCwxLjQxNGMwLjE5NSwwLjE5NSwwLjQ1MSwwLjI5MywwLjcwNywwLjI5MyAgIHMwLjUxMi0wLjA5OCwwLjcwNy0wLjI5M2wyLjgyOC0yLjgyOGMwLjM5MS0wLjM5MSwwLjM5MS0xLjAyMywwLTEuNDE0UzEyLjU0MSwzOC4wNDUsMTIuMTUsMzguNDM2eiIgZmlsbD0iIzAwMDAwMCIvPgoJPHBhdGggZD0iTTQxLjg1LDM4LjQzNmMtMC4zOTEtMC4zOTEtMS4wMjMtMC4zOTEtMS40MTQsMHMtMC4zOTEsMS4wMjMsMCwxLjQxNGwyLjgyOCwyLjgyOGMwLjE5NSwwLjE5NSwwLjQ1MSwwLjI5MywwLjcwNywwLjI5MyAgIHMwLjUxMi0wLjA5OCwwLjcwNy0wLjI5M2MwLjM5MS0wLjM5MSwwLjM5MS0xLjAyMywwLTEuNDE0TDQxLjg1LDM4LjQzNnoiIGZpbGw9IiMwMDAwMDAiLz4KCTxwYXRoIGQ9Ik0xMi4xNSwxMS41NjRjMC4xOTUsMC4xOTUsMC40NTEsMC4yOTMsMC43MDcsMC4yOTNzMC41MTItMC4wOTgsMC43MDctMC4yOTNjMC4zOTEtMC4zOTEsMC4zOTEtMS4wMjMsMC0xLjQxNGwtMi44MjgtMi44MjggICBjLTAuMzkxLTAuMzkxLTEuMDIzLTAuMzkxLTEuNDE0LDBzLTAuMzkxLDEuMDIzLDAsMS40MTRMMTIuMTUsMTEuNTY0eiIgZmlsbD0iIzAwMDAwMCIvPgoJPHBhdGggZD0iTTI3LDEzYy02LjYxNywwLTEyLDUuMzgzLTEyLDEyYzAsMC41NTMsMC40NDcsMSwxLDFzMS0wLjQ0NywxLTFjMC01LjUxNCw0LjQ4Ni0xMCwxMC0xMGMwLjU1MywwLDEtMC40NDcsMS0xICAgUzI3LjU1MywxMywyNywxM3oiIGZpbGw9IiMwMDAwMDAiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K" />Закодированное SVG изображение будет начинаться с:
data: image/svg+xml; utf8; base64,SVG через тег object
<object type="image/svg+xml" data="myImage.svg"></object>SVG через тег embed
<embed src="myImage.svg"></embed>Вставка SVG в CSS через свойство background
SVG через свойство background
.svg-background {
width: 80px;
height: 80px;
background: url('idea.svg') no-repeat center;
}Inline SVG CSS background
.svg-inline-css {
background: url("data: image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 54'%3E%3Cg%3E%3Cpath d='M27,8c-9.374,0-17,7.626-17,17c0,7.112,4.391,13.412,11,15.9V50c0,0.553,0.447,1,1,1h2v2c0,0.553,0.447,1,1,1h6 c0.553,0,1-0.447,1-1v-2h2c0.553,0,1-0.447,1-1v-9.1c6.609-2.488,11-8.788,11-15.9C44,15.626,36.374,8,27,8z M30,49 c-0.553,0-1,0.447-1,1v2h-4v-2c0-0.553-0.447-1-1-1h-1v-5h8v5h40z M31.688,39.242C31.277,39.377,31,39.761,31,40.192V42h-8v-1.808 c0-0.432-0.277-0.815-0.688-0.95C16.145,37.214,12,31.49,12,25c0-8.271,6.729-15,15-15s15,6.729,15,15 C42,31.49,37.855,37.214,31.688,39.242z'/%3E%3Cpath d='M27,6c0.553,0,1-0.447,1-1V1c0-0.553-0.447-1-1-1s-1,0.447-1,1v4C26,5.553,26.447,6,27,6z'/%3E%3Cpath d='M51,24h-4c-0.553,0-1,0.447-1,1s0.447,1,1,1h5c0.553,0,1-0.447,1-1S51.553,24,51,24z'/%3E%3Cpath d='M7,24h4c-0.553,0-1,0.447-1,1s0.447,1,1,1h5c0.553,0,1-0.447,1-1S7.553,24,7,24z'/%3E%3Cpath d='M43.264,7.322l-2.828,2.828c-0.391,0.391-0.391,1.023,0,1.414c0.195,0.195,0.451,0.293,0.707,0.293 s0.512-0.098,0.707-0.293l2.828-2.828c0.391-0.391,0.391-1.023,0-1.414S43.654,6.932,43.264,7.322z'/%3E%3Cpath d='M12.15,38.436l-2.828,2.828c-0.391,0.391-0.391,1.023,0,1.414c0.195,0.195,0.451,0.293,0.707,0.293 s0.512-0.098,0.707-0.293l2.828-2.828c0.391-0.391,0.391-1.023,0-1.414S12.541,38.045,12.15,38.436z'/%3E%3Cpath d='M41.85,38.436c-0.391-0.391-1.023-0.391-1.414,0s-0.391,1.023,0,1.414l2.828,2.828c0.195,0.195,0.451,0.293,0.707,0.293 s0.512-0.098,0.707-0.293c0.391-0.391,0.391-1.023,0-1.414L41.85,38.436z'/%3E%3Cpath d='M12.15,11.564c0.195,0.195,0.451,0.293,0.707,0.293s0.512-0.098,0.707-0.293c0.391-0.391,0.391-1.023,0-1.414l-2.828-2.828 c-0.391-0.391-1.023-0.391-1.414,0s-0.391,1.023,0,1.414L12.15,11.564z'/%3E%3Cpath d='M27,13c-6.617,0-12,5.383-12,12c0,0.553,0.447,1,1,1s1-0.447,1-1c0-5.514,4.486-10,10-10c0.553,0,1-0.447,1-1 S27.553,13,27,13z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center;
width: 80px; height: 80px; background-size: 80px;
}Свойство background будет начинаться с
data: image/svg+xml, %3CsvgSVG data URI / base64
.svg-base64-CSS {
background-image: url("data:image/svg+xml; utf8; base64, PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDU0IDU0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1NCA1NDsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+CjxnPgoJPHBhdGggZD0iTTI3LDhjLTkuMzc0LDAtMTcsNy42MjYtMTcsMTdjMCw3LjExMiw0LjM5MSwxMy40MTIsMTEsMTUuOVY1MGMwLDAuNTUzLDAuNDQ3LDEsMSwxaDF2MmMwLDAuNTUzLDAuNDQ3LDEsMSwxaDYgICBjMC41NTMsMCwxLTAuNDQ3LDEtMXYtMmgxYzAuNTUzLDAsMS0wLjQ0NywxLTF2LTkuMWM2LjYwOS0yLjQ4OCwxMS04Ljc4OCwxMS0xNS45QzQ0LDE1LjYyNiwzNi4zNzQsOCwyNyw4eiBNMzAsNDkgICBjLTAuNTUzLDAtMSwwLjQ0Ny0xLDF2MmgtNHYtMmMwLTAuNTUzLTAuNDQ3LTEtMS0xaC0xdi01aDh3NUgzMHogTTMxLjY4OCwzOS4yNDJDMzEuMjc3LDM5LjM3NywzMSwzOS43NjEsMzEsNDAuMTkyVjQyaC04di0xLjgwOCAgIGMwLTAuNDMyLTAuMjc3LTAuODE1LTAuNjg4LTAuOTVDMTYuMTQ1LDM3LjIxNCwxMiwzMS40OSwxMiwyNWMwLTguMjcxLDYuNzI5LTE1LDE1LTE1czE1LDYuNzI5LDE1LDE1ICAgQzQyLDMxLjQ5LDM3Ljg1NSwzNy4yMTQsMzEuNjg4LDM5LjI0MnoiIGZpbGw9IiMwMDAwMDAiLz4KCTxwYXRoIGQ9Ik0yNyw2YzAuNTUzLDAsMS0wLjQ0NywxLTFWMWMwLTAuNTUzLTAuNDQ3LTEtMS0xcy0xLDAuNDQ3LTEsMXY0QzI2LDUuNTUzLDI2LjQ0Nyw2LDI3LDZ6IiBmaWxsPSIjMDAwMDAwIi8+Cgk8cGF0aCBkPSJNNTEsMjRoLTRjLTAuNTUzLDAtMSwwLjQ0Ny0xLDFzMC40NDcsMSwxLDFoNGMwLjU1MywwLDEtMC40NDcsMS0xUzUxLjU1MywyNCw1MSwyNHoiIGZpbGw9IiMwMDAwMDAiLz4KCTxwYXRoIGQ9Ik03LDI0SDNjLTAuNTUzLDAtMSwwLjQ0Ny0xLDFzMC40NDcsMSwxLDFoNGMwLjU1MywwLDEtMC40NDcsMS0xUzcuNTUzLDI0LDcsMjR6IiBmaWxsPSIjMDAwMDAwIi8+Cgk8cGF0aCBkPSJNNDMuMjY0LDcuMzIybC0yLjgyOCwyLjgyOGMtMC4zOTEsMC4zOTEtMC4zOTEsMS4wMjMsMCwxLjQxNGMwLjE5NSwwLjE5NSwwLjQ1MSwwLjI5MywwLjcwNywwLjI5MyAgIHMwLjUxMi0wLjA5OCwwLjcwNy0wLjI5M2wyLjgyOC0yLjgyOGMwLjM5MS0wLjM5MSwwLjM5MS0xLjAyMywwLTEuNDE0UzQzLjY1NCw2LjkzMiw0My4yNjQsNy4zMjJ6IiBmaWxsPSIjMDAwMDAwIi8+Cgk8cGF0aCBkPSJNMTIuMTUsMzguNDM2bC0yLjgyOCwyLjgyOGMtMC4zOTEsMC4zOTEtMC4zOTEsMS4wMjMsMCwxLjQxNGMwLjE5NSwwLjE5NSwwLjQ1MSwwLjI5MywwLjcwNywwLjI5MyAgIHMwLjUxMi0wLjA5OCwwLjcwNy0wLjI5M2wyLjgyOC0yLjgyOGMwLjM5MS0wLjM5MSwwLjM5MS0xLjAyMywwLTEuNDE0UzEyLjU0MSwzOC4wNDUsMTIuMTUsMzguNDM2eiIgZmlsbD0iIzAwMDAwMCIvPgoJPHBhdGggZD0iTTQxLjg1LDM4LjQzNmMtMC4zOTEtMC4zOTEtMS4wMjMtMC4zOTEtMS40MTQsMHMtMC4zOTEsMS4wMjMsMCwxLjQxNGwyLjgyOCwyLjgyOGMwLjE5NSwwLjE5NSwwLjQ1MSwwLjI5MywwLjcwNywwLjI5MyAgIHMwLjUxMi0wLjA5OCwwLjcwNy0wLjI5M2MwLjM5MS0wLjM5MSwwLjM5MS0xLjAyMywwLTEuNDE0TDQxLjg1LDM4LjQzNnoiIGZpbGw9IiMwMDAwMDAiLz4KCTxwYXRoIGQ9Ik0xMi4xNSwxMS41NjRjMC4xOTUsMC4xOTUsMC40NTEsMC4yOTMsMC43MDcsMC4yOTNzMC41MTItMC4wOTgsMC43MDctMC4yOTNjMC4zOTEtMC4zOTEsMC4zOTEtMS4wMjMsMC0xLjQxNGwtMi44MjgtMi44MjggICBjLTAuMzkxLTAuMzkxLTEuMDIzLTAuMzkxLTEuNDE0LDBzLTAuMzkxLDEuMDIzLDAsMS40MTRMMTIuMTUsMTEuNTY0eiIgZmlsbD0iIzAwMDAwMCIvPgoJPHBhdGggZD0iTTI3LDEzYy02LjYxNywwLTEyLDUuMzgzLTEyLDEyYzAsMC41NTMsMC40NDcsMSwxLDFzMS0wLjQ0NywxLTFjMC01LjUxNCw0LjQ4Ni0xMCwxMC0xMGMwLjU1MywwLDEtMC40NDcsMS0xICAgUzI3LjU1MywxMywyNywxM3oiIGZpbGw9IiMwMDAwMDAiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K");
width: 80px; height: 80px; background-size: 80px;
}Будет начинаться с
data: image/svg+xml; utf8; base64,Полезные ссылки
- Как изменить цвет svg
- Анимация svg
- Полезный сервис для кодирования svg
Подписаться | SVG-фоны
Общие вопросы
Почему SVGBackgrounds.com?
SVGBackgrounds облегчает жизнь веб-дизайнерам, графическим дизайнерам и тем, у кого нет профессиональных творческих навыков. Наш простой в использовании фоновый инструмент позволяет вам настраивать визуально потрясающие фоны с молниеносным развертыванием в ваших проектах, чтобы вы могли лучше проводить время, например, наслаждаться пляжем.
Почему мне следует использовать SVG?
Сегодняшние веб-сайты очень наглядны, но большинство форматов изображений громоздки и могут замедлять загрузку веб-сайтов.Вот где сияют SVG! SVG масштабируемы, имеют небольшой размер файла, высокое разрешение, хорошо поддерживаются и являются идеальным способом выделиться среди конкурентов. SVG — это круто!
Что входит в платные планы?
Платные планывключают доступ к нашей премиальной фоновой коллекции и лицензию на использование фонов без указания авторства. Доступ ко всей коллекции предоставляется ежемесячным подписчикам сверхурочно, а годовые подписчики получают мгновенный доступ ко всем 200 фоновым изображениям.Ежемесячные подписчики получают 20 новых фонов за каждый платежный цикл, пока их коллекция не достигнет в общей сложности 200 фонов. Одиночные лицензии не считаются платным планом и не получают доступа к премиум-коллекции.
Где я могу использовать фоны?
Наши фоны могут быть использованы в качестве фона где угодно, включая веб-сайты, блоги, графику в социальных сетях, листовки, брошюры и т. Д., При условии, что фоны не распространяются повторно, а файлы изображений не распространяются или не продаются.Например, вы не можете включать наши фоны в качестве загружаемых на веб-сайты, предлагающие бесплатные или платные стоковые фотографии. Полную лицензию можно посмотреть здесь. Пожалуйста, не стесняйтесь обращаться к нам, чтобы запросить разъяснения по конкретным проектам.
Есть ли ограничения на количество используемых фонов?
Нет ограничений на количество создаваемых, загружаемых и используемых фонов при условии, что вы соблюдаете условия нашей лицензии.
Масштабирование фона SVG — CSS: каскадные таблицы стилей
Учитывая гибкость изображений SVG, нужно о многом помнить при использовании их в качестве фоновых изображений со свойством background-image , и даже больше, что нужно учитывать при их масштабировании с помощью свойства background-size .В этой статье описывается, как выполняется масштабирование изображений SVG при использовании этих свойств.
По большей части алгоритм можно описать этими четырьмя правилами. Есть некоторые крайние случаи, на которые не распространяются эти правила, но они охватывают большинство случаев.
- Если
background-sizeзадает фиксированное измерение (то есть проценты и относительные единицы фиксируются их контекстом), это измерение выигрывает. - Если изображение имеет внутреннее соотношение (то есть его отношение ширины к высоте является постоянным, например 16: 9, 4: 3, 2.39: 1, 1: 1 и т. Д.), Размер визуализации сохраняет это соотношение.
- Если изображение указывает размер, и размер не изменяется ограничением или обложкой, этот указанный размер выигрывает.
- Если ни один из вышеперечисленных случаев не соблюден, изображение визуализируется с тем же размером, что и фоновая область.
Стоит отметить, что алгоритм изменения размера учитывает только размеры и пропорции изображения или их отсутствие. Изображение SVG с фиксированными размерами будет обрабатываться как растровое изображение того же размера.
Примечание
Если вы пытаетесь растянуть свой SVG до другого соотношения сторон с помощью CSS — например, чтобы растянуть его по фону страницы — убедитесь, что ваш SVG включает preserveAspectRatio = "none" . Узнайте больше о preserveAspectRatio .
Прежде чем погрузиться в результаты использования различных типов исходных изображений и посмотреть, как они выглядят при использовании с размером фона , было бы полезно взглянуть на несколько примеров исходных изображений, которые имеют разные размеры и настройки размера.
В каждом случае мы показываем, как выглядит исходное изображение, отрендеренное в блоке 150×150, и предоставляем ссылку на источник SVG.
Безразмерное и безразмерное
Это изображение безразмерное и непропорциональное. Его не волнует, какой у него размер, и его не заботит сохранение определенного соотношения сторон. Из этого получится хороший градиентный фон рабочего стола, который будет работать независимо от размера вашего экрана и его соотношения сторон.
Источник SVG
Одно указанное измерение, непропорционально
Это изображение имеет ширину 100 пикселей, но не имеет высоты или внутреннего соотношения.Это, по сути, тонкая полоска обоев, которую можно растянуть на всю высоту блока.
Источник SVG
Одно указанное измерение с внутренним соотношением
Это изображение определяет высоту 100 пикселей, но не ширину. Он также определяет внутреннее соотношение сторон 3: 4. Это гарантирует, что его отношение ширины к высоте всегда равно 3: 4, если только оно не масштабируется намеренно до непропорционального размера (то есть путем явного указания ширины и высоты, которые не соответствуют этому соотношению).
Это очень похоже на указание определенной ширины и высоты, поскольку, если у вас есть одно измерение и соотношение, подразумевается другое измерение, но это все еще полезный пример.
Источник SVG
Без ширины или высоты с внутренним соотношением
Это изображение не указывает ни ширину, ни высоту; вместо этого он определяет внутреннее соотношение 1: 1. Думайте об этом как о значке программы. Он всегда квадратный и может использоваться любого размера, например 32×32, 128×128 или 512×512.
Исходный код SVG
Теперь давайте посмотрим на несколько примеров того, что происходит, когда мы применяем различное масштабирование к этим изображениям. В каждом из приведенных ниже примеров окружающие прямоугольники имеют ширину 300 пикселей и высоту 200 пикселей. Кроме того, для фонов background-repeat установлено на no-repeat для ясности.
Примечание: Скриншоты ниже показывают ожидаемый рендеринг . В настоящее время не все браузеры правильно их отображают.
Указание фиксированной длины для обоих измерений
Если вы используете background-size для указания фиксированной длины для обоих измерений, эти длины всегда используются в соответствии с правилом 1 выше.Другими словами, изображение всегда будет растягиваться до указанных вами размеров, независимо от того, указаны ли в исходном изображении его размеры и / или соотношение сторон.
Источник: Без размеров или внутреннего соотношения
С учетом этого CSS:
фон: url (no-sizes-or-ratio.svg);
размер фона: 125 пикселей 175 пикселей;
Результат рендеринга будет выглядеть так:
Источник: одно указанное измерение, без внутреннего соотношения
С учетом этого CSS:
фон: url (ширина 100 пикселей, высота или соотношение.svg);
размер фона: 250 пикселей 150 пикселей;
Результат рендеринга будет выглядеть так:
Источник: один указанный размер с внутренним соотношением
С учетом этого CSS:
фон: url (100px-height-3x4-ratio.svg);
размер фона: 275 пикселей 125 пикселей;
Результат рендеринга будет выглядеть так:
Источник: не указана ширина или высота с внутренним соотношением
С учетом этого CSS:
фон: url (no-sizes-1x1-ratio.svg);
размер фона: 250 пикселей 100 пикселей;
Результат рендеринга будет выглядеть так:
Использование contain или cover
Указание cover для размера фона делает изображение как можно меньше, но при этом покрывает всю область фона. содержат , с другой стороны, делают изображение максимально большим, не ограничиваясь областью фона.
Для изображения с внутренним соотношением ровно один размер соответствует обложке / критерии соответствия.Но если внутреннее соотношение не указано, покрытия / подгонка недостаточно, поэтому ограничения большие / малые выбирают результирующий размер.
Источник: Без размеров или внутреннего соотношения
Если изображение не указывает ни размеры, ни внутреннее соотношение, не применяется ни правило 2, ни правило 3, поэтому правило 4 вступает в силу: фоновое изображение визуализируется, покрывая всю область фона. Это удовлетворяет наибольшему или наименьшему ограничению.
фон: URL (без размеров или соотношения.svg);
размер фона: содержать;
Результат рендеринга выглядит так:
Источник: одно указанное измерение, без внутреннего соотношения
Точно так же, если для изображения задано одно измерение, но нет внутреннего соотношения, применяется правило 4, и изображение масштабируется, чтобы покрыть всю область фона.
фон: url (100px-wide-no-height-or-ratio.svg);
размер фона: содержать;
Результат рендеринга выглядит так:
Источник: один указанный размер с внутренним соотношением
Все меняется, когда вы указываете внутреннее соотношение.В этом случае правило 1 не актуально, поэтому применяется правило 2: мы стараемся сохранить любое внутреннее соотношение (при соблюдении содержится или охватывает ). Например, сохранение внутреннего соотношения сторон 3: 4 для блока 300×200 с содержит означает рисование фона 150×200.
содержать футляр
фон: url (100px-height-3x4-ratio.svg);
размер фона: содержать;
Результат рендеринга выглядит так:
Обратите внимание на то, как рендерится все изображение, как можно лучше вписываясь в рамку, не обрезая его.
крышка футляра
фон: url (100px-height-3x4-ratio.svg);
размер фона: обложка;
Результат рендеринга выглядит так:
Здесь соотношение 3: 4 сохраняется при растяжении изображения до заполнения всего поля. Это приводит к обрезанию нижней части изображения.
Источник: Нет размеров с внутренним соотношением
При использовании изображения без внутренних размеров, но с внутренним соотношением, все работает аналогично.
содержать футляр
фон: url (no-sizes-1x1-ratio.svg);
размер фона: содержать;
Результат рендеринга выглядит так:
Обратите внимание, что размер изображения соответствует наименьшему размеру при сохранении соотношения сторон 1: 1.
крышка футляра
фон: url (no-sizes-1x1-ratio.svg);
размер фона: обложка;
Результат рендеринга выглядит так:
Здесь изображение имеет размер так, чтобы заполнять наибольшее измерение.Соотношение сторон 1: 1 было сохранено, хотя с этим исходным изображением это может быть трудно увидеть.
Автоматическое изменение размера с использованием «auto» для обоих измерений
Если для background-size установлено значение auto или auto auto , правило 2 гласит, что рендеринг должен сохранять любое внутреннее соотношение, которое предоставляется.
Источник: Без размеров или внутреннего соотношения
Если исходное изображение не задано собственными пропорциями или размерами, вступает в силу правило 4, и изображение визуализируется для заполнения области фона.
фон: url (no-sizes-or-ratio.svg);
размер фона: авто авто;
Результат рендеринга выглядит так:
Источник: Одно измерение, без внутреннего соотношения
Если внутреннее соотношение не указано, но указано хотя бы одно измерение, вступает в силу правило 3, и мы визуализируем изображение, подчиняющееся этим размерам.
фон: url (100px-wide-no-height-or-ratio.svg);
размер фона: авто авто;
Результат рендеринга выглядит так:
Обратите внимание, что ширина, которая указана в исходном SVG на уровне 100 пикселей, соблюдается, в то время как высота заполняет область фона, поскольку она не указана (явно или внутренним соотношением).
Источник: Одно измерение и внутреннее соотношение
Если у нас есть внутреннее соотношение с фиксированным размером, это фиксирует оба измерения на месте. Как уже упоминалось, знание одного измерения и отношения равносильно точному указанию обоих измерений.
фон: url (100px-height-3x4-ratio.svg);
размер фона: авто авто;
Результат рендеринга выглядит так:
Поскольку это изображение имеет явную высоту 100 пикселей, соотношение 3: 4 явно устанавливает его ширину на уровне 75 пикселей, так что именно так оно отображается в случае auto .
Источник: Нет фиксированных размеров с внутренним соотношением
Если задано внутреннее соотношение, но нет размеров, применяется правило 4, за исключением того, что также применяется правило 2. Таким образом, изображение отображается так же, как для корпуса contain .
фон: url (no-sizes-1x1-ratio.svg);
размер фона: авто авто;
Результат рендеринга выглядит так:
Использование «авто» и одной определенной длины
При правиле 1 всегда используются указанные размеры, поэтому нам нужно использовать наши правила только для определения второго измерения.
Источник: Без размеров или внутреннего соотношения
Если изображение не имеет размеров или внутреннего соотношения, применяется правило 4, и мы используем размер области фона для определения значения для размера auto .
фон: url (no-sizes-or-ratio.svg);
размер фона: авто 150 пикселей;
Здесь ширина определяется с использованием ширины области фона в соответствии с правилом 4, а высота равна 140 пикселям, указанным в CSS.
Источник: одно указанное измерение без внутреннего соотношения
Если изображение имеет одно указанное измерение, но не имеет внутреннего соотношения, то указанное измерение используется в соответствии с правилом 3, если для этого размера установлено значение auto в CSS.
фон: url (100px-wide-no-height-or-ratio.svg);
размер фона: 200 пикселей автоматически;
Здесь 200 пикселей, указанные в CSS, переопределяют ширину 100 пикселей, указанную в SVG, по правилу 1. Поскольку не предусмотрено внутреннее соотношение или высота, auto выбирает высоту области фона в качестве высоты визуализированного изображения.
фон: url (100px-wide-no-height-or-ratio.svg);
размер фона: авто 125 пикселей;
В этом случае ширина указана как auto в CSS, поэтому ширина 100 пикселей, указанная в SVG, выбрана согласно правилу 3. Высота установлена на 125 пикселей в CSS, поэтому она выбирается согласно правилу 1.
Источник: один указанный размер с внутренним соотношением
Если размер указан, правило 1 применяет это измерение из SVG к визуализированному фону, если это специально не переопределено CSS.Когда также указывается внутреннее соотношение, оно используется для определения другого измерения.
фон: url (100px-height-3x4-ratio.svg);
размер фона: 150 пикселей автоматически;
В этом случае мы используем ширину изображения, указанную в CSS, равную 150 пикселей, поэтому применяется правило 1. Внутреннее соотношение сторон 3: 4 определяет высоту корпуса auto .
Источник: Размеры с внутренним соотношением не указаны.
Если в SVG не указаны размеры, применяется размер, указанный в CSS, а затем внутреннее соотношение используется для выбора другого измерения в соответствии с правилом 2.
фон: url (no-sizes-1x1-ratio.svg);
размер фона: 150 пикселей автоматически;
Ширина устанавливается CSS равной 150 пикселей. Значение auto для высоты вычисляется с использованием этой ширины и соотношения сторон 1: 1, равного 150 пикселей, в результате получается изображение выше.
Пример использования: сложные фоновые изображения SVG | Targetprocess
фоновых изображений SVG получили высокую оценку во многих статьях, с которыми я сталкивался.Выточенные фоны SVG кажутся действительно непревзойденным вариантом с нескольких точек зрения. Но все статьи, которые я читал, лишь вкратце касались проблем производительности рендеринга SVG, то есть это операция, требующая большего объема памяти, поскольку браузеру приходится каждый раз заново растрировать изображения.
Итак, однажды я открыл веб-приложение, над которым работаю, и обнаружил, что мой браузер как сумасшедший пожирает память: это было около 600 МБ (!) Для одной вкладки и даже больше для экрана Retina.Я пошел прямо, чтобы выяснить, где утекает эта память.
Прежде всего, я отметил более высокое использование памяти из-за всплывающего окна, отображающего всего 20 значков. Затем я запустил профилировщик в Chrome и обнаружил, что ни javaScript, ни CSS, ни HTML не виноваты. Я также заметил, что меньшее количество значков занимает меньше памяти. Кроме того, значки извлекаются из изображения спрайта размером 2000 x 500 пикселей. Когда я заменил SVG-спрайт на PNG-спрайт того же размера, произошло чудо: объем памяти вернулся к разумным пределам.Очевидно, для каждой маленькой иконки рендерилось большое изображение .bmp, и именно эти .bmp-изображения занимают память.
Моя первая мысль была — почему бы нам не отказаться от SVG? Но это не так просто, вы не можете просто избавиться от SVG и заменить его на .png, поскольку мы заботимся о пользователях с экранами с высоким разрешением.
Я изучил некоторые статьи и спецификации SVG и решил попробовать их вместо px. Как я и ожидал, при относительных размерах шрифтов память исчерпывалась настолько, насколько это было для файла.PNG изображение.
Вот сравнение памяти SVG и PNG (для 16 значков):
| SVG, высотой | 9216 к | демонстрация |
| SVG, | пикселей101600 к | демонстрация |
| PNG, мелкий холст | 7748 к | демонстрация |
| PNG, большой холст | 10060 к | демонстрация |
Итак, что мы можем с этим поделать? Первый вариант — использовать два спрайта PNG, один с нормальным разрешением, а другой с разрешением Retina.Для спрайтов SVG относительные размеры шрифтов, например эм, было бы лучше.
После некоторого дополнительного исследования похоже, что такое поведение наблюдается только в браузерах на основе хрома. В Firefox, Opera и IE этой проблемы нет. Конечно, использование памяти зависит от размера холста, а не от размеров шрифта в пикселях или em. Но размеры влияют на масштабируемость SVG, поэтому имейте это в виду, выбирая px или em для вашего конкретного случая. Если вы хотите взглянуть, мы сообщили об этой проблеме в Chrome, и теперь она исправлена.
Дополнительная литература:
www.webdesignerdepot.com/2012/12/stop-chasing-screen-resolutions/
coding.smashingmagazine.com/2012/01/16/resolution-independence-with-svg/
www.broken-links.com/2012 / 08/14 / better-svg-sprites-with-fragment-identifiers /
www.w3.org/TR/SVG/
smus.com/canvas-vs-svg-performance/
* переведено на английский язык и опубликовано Ольгой Кузиной. Оригинал статьи на русском языке.
Лучшие бесплатные ресурсы для шаблонов SVG
изображений SVG отзывчивы и всегда выглядят четкими и чистыми.SVG обеспечивает полноэкранные визуальные эффекты в высоком разрешении с размером файла около 5 КБ и хорошо поддерживаются всеми современными браузерами. Если вы ищете шаблоны SVG для фона в высоком разрешении, вот несколько мест, где их можно найти.
Генератор паттернов от Doodad.dev
Создавайте бесшовные, уникальные, бесплатные шаблоны для бесплатного использования в любом проекте. Экспортируйте как SVG, JPEG или PNG.
Paaatterns — Бесплатная коллекция красивых шаблонов для всех векторных форматов
22+ точно созданных узоров для Sketch, Figma, XD, Illustrator.В PNG и SVG. Легко настраивать и редактировать благодаря стилям слоев и векторным формам.
Фоны SVG — создание настраиваемых фонов высокого разрешения и масштабируемых
SVG Backgrounds содержит набор настраиваемых повторяющихся шаблонов и фонов на основе SVG для веб-сайтов и блогов.
паттернов героев — бесплатные повторяющиеся фоновые узоры SVG
Коллекция бесплатных повторяемых фоновых шаблонов SVG для использования в ваших цифровых проектах.
WowPatterns — 1000+ паттернов для бесплатного скачивания
Векторы, Ai, PSD, EPS, формат файлов JPEG.Загрузите идеальный узор и фотографии для вашего проекта или графического дизайна. Новый паттерн добавляется ежедневно.
Patterninja — Приложение для создания выкройки
Комбинируйте изображения из нашей бесплатной библиотеки или используйте свои собственные. Изготовленные выкройки можно скачать в высоком разрешении и использовать для печати и в Интернете.
Flaticon — Генератор паттернов
Этот инструмент поможет вам создать свой собственный узор, используя любые иконки из Flaticon
.Галерея паттернов SVG
Галерея бесплатных фоновых узоров и дизайнов SVG.
SVGeez — Бесплатный настраиваемый фоновый узор SVG
SVGeez содержит коллекцию забавных, бесплатных и настраиваемых повторяющихся шаблонов SVG и фонов для веб-сайтов. Настройте цвета переднего плана и фона, настройте масштаб, скопируйте и вставьте SVG CSS на свой веб-сайт для использования.
Конвертер SVG в фоновое изображение
Переформатируйте изображения SVG в URI для использования в качестве фоновых изображений CSS в вашей таблице стилей в качестве кроссбраузерных.
Майк Фоскетт — (ввод: )
Извините, для использования этого содержимого требуется JavaScript.
Преобразование фонового изображения из SVG в CSS
Выводить SVG как фоновые изображения CSS
Копировать CSS Сброс настроек
Сгенерированный CSS:
Сначала сжимайте SVG
Всегда сжимайте SVG перед запуском в производство.Удалите лишний код Illustrator, упростите структуру и сократите количество используемых десятичных знаков. Лично я использую SVGOMG.
Зачем использовать SVG URI вместо SVG data-URI?
Встраивание SVG URI в CSS в настоящее время является предпочтительным методом, потому что:
- SVG остается редактируемым вручную в таблице стилей.
- SVG URI занимает меньше места, теоретически на 25% меньше кода a, чем в формате data-URI. URI
- SVG также обеспечивают лучшее сжатие gzip, чем их эквиваленты URI данных.
- CSS-файл можно кэшировать.
Дополнительные сведения см. В разделах «Оптимизация SVG в URI данных» и «Возможно, не используйте Base64 SVG».
Поддерживается всеми основными браузерами, включая IE 9+, см. Таблицу поддержки фоновых изображений CSS.
Характеристики
- Преобразует SVG в URI для использования в качестве фоновых изображений CSS во всех современных браузерах (IE9 +).
- Игнорирует файлы изображений в формате, отличном от SVG.
- Имена классов являются производными от имени файла, с пробелами, замененными дефисами.
- Очень быстрое преобразование JavaScript, без обращений к серверу, с использованием FileList API .
- Лучше, чем использовать URI данных base64.
Конвертер SVG в фоновое изображение
Встраивайте URI SVG прямо в таблицу стилей
Поделиться в Твиттере20+ бесплатных ресурсов фоновых шаблонов SVG и CSS — Bashooka
Фоновые узоры можно использовать в дизайне веб-сайтов или в любой другой форме работы, включая проектирование.Но создать собственный SVG и CSS с нуля — непростая задача. Итак, вот 15 ресурсов фоновых шаблонов SVG и CSS, которые позволят вам создавать и загружать изображения SVG для использования в фонах CSS для веб-сайтов и графического дизайна.
Неограниченное количество загрузок: 600 000+ HTML5 шаблонов и дизайнерских ресурсов Объявление Скачать сейчасГенератор шаблонов
Используйте этот инструмент для создания уникальных бесшовных шаблонов без лицензионных отчислений. Выберите базовый стиль, а затем настройте его с помощью цветов, фильтров и преобразований.
Patternico
Даже если вы не являетесь дизайнером UX или совсем не дизайнером, приготовьтесь застрять на этом веб-сайте, охваченном внезапным желанием создать шаблоны, которые вам даже не нужны!
Шаблон CSS
Только библиотека CSS для заполнения пустого фона красивыми узорами.
Тартанифай
Коллекция из более 5000 выкроек из тартана. Все готово к загрузке и использованию в качестве повторяющихся плиток в форматах SVG и PNG.
Paa Pattern
Бесплатная коллекция красивых узоров для всех векторных форматов.
Узоры героев
Это бесплатная библиотека повторяющихся паттернов SVG, которые можно настроить с помощью различных стилей, цветов и непрозрачности. В нем есть множество различных шаблонов на выбор, и все они перечислены прямо на главной странице. Прокручивая страницу вниз, вы увидите живые демонстрации каждой из них, и вы можете щелкнуть любую из них, чтобы увидеть, как они выглядят.
CSS-каракули
CSS-Doodle — отличная библиотека инструментов, которые помогают создавать красивые рисунки с помощью CSS.В сочетании с небольшим количеством javascript искусство оживает и даже становится интерактивным.
SVG фон
Создавайте привлекательные фоны и узоры для своего веб-сайта или блога с помощью этого бесплатного инструмента, который может управлять цветом, формой, размером и т. Д. На выходе получается CSS.
Галерея паттернов SVG
Галерея бесплатных фоновых узоров и дизайнов SVG.
Patterninja
Комбинируйте изображения из нашей бесплатной библиотеки или используйте свои собственные.Изготовленные выкройки можно скачать в высоком разрешении и использовать для печати и в Интернете.
Обычный узор
Создатель бесшовных узоров на основе SVG.
Trianglify
Это библиотека для создания красивых фоновых изображений SVG.
GeoPattern
На самом деле это всего лишь набор из чуть более десятка шаблонов, но дисплей действительно хорош. Больше нечего сказать. Вы набираете слова, наслаждаетесь красочными узорами и, если видите что-то, что вам нравится, просто нажимаете кнопку «Сохранить узор» внизу.
Текстуры
Это библиотека javascript для создания шаблонов SVG. Созданный на основе d3.js, он предназначен для визуализации данных.
SV, поколение
Создание фоновой графики и узоров SVG.
Болт
Patternbolt — это прекрасный выбор фонового рисунка SVG, упакованный в один файл или файл SCSS (или CSS).
Барс
Индикаторы выполнения CSS, сделанные с помощью шаблонов SVG.
Классные фоны
Cool Backgrounds — это набор инструментов для создания привлекательных красочных изображений для блогов, социальных сетей и веб-сайтов.
Шаблонизатор
С Patternizer легко сделать что-нибудь потрясающее всего за несколько минут. Он требует всей работы по созданию сложных узоров, позволяя вам сосредоточиться на творчестве и игре. Выкройки можно сохранять и делиться ими с кем угодно, что дает возможность совместной работы и создания ремиксов.
Генератор фоновых узоров SVG
Веселый эксперимент с холстом, экспортирующий svgs.
Использование масштабируемой векторной графики (SVG) в качестве фона кнопок
Вчера вечером я работал над проектом, в котором в макетах требовались некоторые ассиметричные формы кнопок, которые были разных размеров. Вместо того, чтобы создавать полдюжины фоновых изображений для каждой длины кнопки, я подумал, могу ли я просто использовать файл SVG или масштабируемой векторной графики в качестве фона, который затем можно растягивать по мере необходимости. Как вы знаете, при растягивании SVG-файлов нет штрафа в виде пикселизации, потому что они не основаны на пикселях.Это также сэкономит много времени на загрузке сайта, поскольку я могу загрузить одно векторное изображение вместо полдюжины изображений на основе пикселей.
Я создал SVG в Illustrator, создав форму, а затем просто сохранил ее в формате SVG. Затем в CSS я указал этот файл как фоновое изображение для моей кнопки. Вот где это было сложно. По своей природе SVG хотят сохранить свое соотношение сторон, что благородно. Но я специально хотел растянуть их только по горизонтали, сохранив при этом ту же высоту.Я пробовал много вариантов размера фона, высоты, ширины и т. Д., Но наконец нашел волшебную палочку на stackoverflow.com, в которой говорилось: «попробуйте удалить атрибуты ширины и высоты в корневом элементе svg, добавив preserveAspectRatio =» none «viewBox. = «0 0 1024 800».
Великолепно! Итак, я открыл файл SVG в Sublime Text 2 (подойдет любой редактор кода, и я сразу взломал его. Я упростил атрибут xmlns , удалил много обертка, которую Illustrator добавил и добавил значение, чтобы сообщить SVG игнорировать соотношение сторон.