Введение в SVG-спрайт

SVG Ресурсы изображений Icon CSS

Введение в SVG

SVG, сокращение от Scalable Vector Graphics, представляет собой язык разметки XML, используемый для описания двухмерной векторной графики.Графика SVG не зависит от разрешения, поэтому графика не будет показывать очевидных зубчатых краев из-за увеличения масштаба.

icon sprite

Когда нам нужно использовать несколько иконок, для экономии запросов и облегчения управления иконки обычно объединяются в один файл, а затем из файла коллекции иконок определенным методом извлекается необходимая графика и отображается во время использования. наиболее популярными из них должны быть знакомые CSS Sprite и Icon Font.

CSS Sprite

Принцип CSS Sprite заключается в организации нескольких значков в один файл изображения в соответствии с определенными правилами и использовании их при использовании.background-imageа такжеbackground-positionОтображение определенной части изображения.Технология CSS Sprite широко используется в течение длительного времени, существует множество инструментов для автоматической генерации изображений Sprite и файлов CSS, таких как (gulp.spritesmith)[GitHub.com/Привет, Вольфсон/Итак…].

.icon1 {
    background-image: url(/res/icon1.png)
}
.icon1-increase {
    background-position: -10px -10px;
}
<i class="icon1 icon1-increase"/>

Технология CSS Sprite отработана и обладает хорошей совместимостью, но ее недостатки также очевидны, например, в реальных потребностях соответствующие значки одинаковой формы, но разного цвета должны сохранять копию для каждого значка разных цветов, иногда необходимо увеличить существующую иконку При отображении обнаружено, что зубчатость серьезная, тогда необходимо сохранить еще одну увеличенную версию значка.Поэтому файл спрайта со временем будет становиться все больше и больше, а содержимое будет становиться все более и более хаотичным, и постепенно станет трудно управлять.

Icon Font

Основной принцип Icon Font заключается в том, чтобы определить Icon как шрифт изображения, который используется в CSS.@font-faceПредставлен пользовательский шрифт Icon Font, повторно используемыйfont-familyи код символа для отображения указанного значка.

@font-face {
    font-family: 'iconfont';
    src: url(/res/icon2.ttf) format('truetype');
}
.icon2 {
    font-family: 'iconfont';
}
<i class="icon2">&#33</i>

Так как используется шрифт, можно пройтиcolor, font-sizeУстановите стиль значка.Шрифт значка имеет меньший размер файла, чем изображения CSS Sprite, и его легче поддерживать, чем изображения, но шрифты значков обычно используют только один цвет, а создание файла шрифта сложнее, чем CSS Sprite.

SVG Sprite

Обычно при использовании SVG мы пишем напрямуюsvgСреди тегов:

    <svg xmlns="http://www.w3.org/2000/svg" width="150" height="100" viewBox="0 0 3 2">
        <rect width="1" height="2" x="0" fill="#008d46" />
        <rect width="1" height="2" x="1" fill="#ffffff" />
        <rect width="1" height="2" x="2" fill="#d2232c" />
    </svg>

На этом этапе графика SVG будет отображаться прямо на странице.В атрибутах SVG вы можете использовать (symbol)[developer.Mozilla.org/this-cn/docs/…, и использовать (use)[developer.Mozilla.org/this-cn/docs/…, чтобы реализовать функцию SVG Sprite.

Пример SVG-спрайта:

<svg style="height:0;width:0;display:none;" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <symbol id="icon-italy" width="150" height="100" viewBox="0 0 3 2">
        <rect width="1" height="2" x="0" fill="#008d46" />
        <rect width="1" height="2" x="1" fill="#ffffff" />
        <rect width="1" height="2" x="2" fill="#d2232c" />
    </symbol>

    <symbol id="icon-france" width="150" height="100" viewBox="0 0 3 2">
        <rect width="1" height="2" x="0" fill="#002496" />
        <rect width="1" height="2" x="1" fill="#ffffff" />
        <rect width="1" height="2" x="2" fill="#ee2839" />
    </symbol>
</svg>

<svg><use xlink:href="#icon-italy"/></svg>
<svg><use xlink:href="#icon-france"/></svg>

Это реализует SVG Sprite.

принцип

Это можно наблюдать через devtool,useМетки реализованы с помощью теневого дома.

use.shadowdom
use.shadowdom

это проходитxlink:hrefэтот XMLattributeСсылка на указанный SVGsymbol, указанный во время рендерингаsymbolСодержимое тега будет обработано и отображено на странице. Это означает, что если вы не можете напрямуюuseДоступ к теневому дому в теге и его изменение.Например, что-то вродеuse#rectТакие селекторы не могут действовать, поэтому их нельзя сочетать с обычными селекторами CSS.useРазличные части графика контролируются.

CSS-стили

Чаще всего нам нужно изменить только размер и цвет иконки, в SVG Sprite это не сложно реализовать.

  1. размер

Путем измененияsvgРазмер контейнера, размер значка можно легко контролировать.

.icon{
    width: 120px;
    height: 80px;
}
.icon.icon-small{
    width: 60px;
    height: 40px;
}
<svg class="icon"><use xlink:href="#icon-italy"/></svg>
<svg class="icon icon-small"><use xlink:href="#icon-italy"/></svg>

svg.icon.size
svg.icon.size

  1. цвет
  • монохромный

Поскольку цвет не может быть напрямую сопоставленuseВыбрана графическая метка в корне тени значка, поэтому при определении цвета значка необходимо использоватьfill: inheritЭто одно свойство.

svg path{
    fill: inherit;
}
.icon2-green{
    fill: #008d46;
}
.icon2-red{
    fill: #dc352f;
}
<svg class="icon2 icon2-green">
    <use xlink:href="#icon-increase"/>
</svg>
<svg class="icon2 icon2-red">
    <use xlink:href="#icon-increase"/>
</svg>

svg.icon.color
svg.icon.color

использоватьinherit, вы также можете определитьstroke-width, strokeи другие свойства.

  • многоцветный

В дополнение к определению общего цвета значка, вы также можете определить цвет различных частей графика по мере необходимости.Здесь используются пользовательские свойства css (CSS Custom Properties).

нужно быть здесьicon.svgВнесите изменения, чтобы установить цвет каждой части графика наfill: var(--*[, default])форма.

<symbol id="icon-flag" width="150" height="100" viewBox="0 0 3 2">
    <rect width="1" height="2" x="0" style="fill: var(--color0, #008d46)" />
    <rect width="1" height="2" x="1" style="fill: var(--color1, #fff)"/>
    <rect width="1" height="2" x="2" style="fill: var(--color2, #d2232c)"/>
</symbol>

определить стиль css

.flag-belgium {
    --color0: #201b18;
    --color1: #f1ee3d;
    --color2: #dc352f;
}
<svg class="icon">
    <use xlink:href="#icon-flag"/>
</svg>
<svg class="icon flag-belgium">
    <use xlink:href="#icon-flag"/>
</svg>

svg.icon.color.parts
svg.icon.color.parts

Кроме того, есть и другие формы определения стиля, более подробное содержание можно прочитатьStyling SVG Content with CSS.

фактическое использование

ссылка на внешний svg

Выше описано использование встроенного svg, но на самом деле можно использовать и внешний svg.

<svg class="icon">
    <use xlink:href="/res/svg/icon.svg#icon-flag"/>
</svg>

Однако этот метод не совместим с IE9~10, но если вам нужно использовать форму внешнего svg, вы можете ввести полифиллsvg4everybody, при работе без внешней поддержки svg этот pollyfill загрузит файл комитета svg через асинхронный запрос и внедрит его на страницу, преобразуя эталонный метод во встроенный svg.

использовать в ftl

допустимыйsvg.ftlопределить сериюmacroИспользуется для загрузки.svgдокумент.

<#macro svgicon path>
    <#include "${path}">
</#macro>

<#macro svgicon3 >
    <@svgicon "./icon3.svg"/>
</#macro>

ссылка на страницеdemo.ftl:

<@svgicon1/>
<svg>
    <use xlink:href="#icon-italy"/>
</svg>

использовать в обычном

xlink:hrefявляется функцией XML, использующей пространства имен, если она написана на.htmlТег страницы, эта функция может быть проанализирована браузером и завершить рендеринг svg.Если переменная svg создается через DOM API, ее необходимо обрабатывать с помощью определенного метода (SVG with USE tag not rendering).

нужно использоватьcreateElementNSа такжеsetAttributeNSМетод объявляет пространство имен во время создания.

var use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#icon-increase');
document.querySelector('#svgid').appendChild(use);

Пока он должен быть динамически созданuseэлементы, вам нужно использовать описанный выше метод для создания экземпляров элементов в SVG Sprite, но в текущей версии Regular (0.4.3) пространство имен не будет обрабатываться, а это означает, что если вы напрямую используете<svg><use xlink:href/></svg>При написании в шаблоне компонента Regular метка не может нормально отрисовываться, для этого можно добавить директивуr-xlink:hrefчтобы завершить настройку пространства имен вручную.

Regular.directive('r-xlink:href', function (elem, val) {
    if (val&& val.type === 'expression') {
        this.$watch(val, function (newVal) {
            elem.setAttributeNS('http://www.w3.org/1999/xlink', 'href', newVal);
        });
    } else {
        elem.setAttributeNS('http://www.w3.org/1999/xlink', 'href', val);
    }
});

Затем в шаблоне компонента вы можете сделать это как в обычном.htmlSVG Sprite используется как в .Конечно, сначала убедитесь, что SVG Sprite записан на страницу.

<svg>
    <use r-xlink:href="#icon-italy"/>
</svg>

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

резюме

По сравнению с CSS Sprite и Icon Font, упомянутыми выше, SVG имеет очевидные преимущества:

  • Увеличение и уменьшение масштаба без искажений
  • Такие атрибуты, как размер, цвет и т. д., можно гибко настраивать
  • Небольшой размер и простое управление

Хотя SVG Sprite обладает высокой степенью гибкости, в то же время SVG-совместимость нуждается в изучении, а его производительность рендеринга не так высока, как у картинок и шрифтов, что в некоторых случаях может быть неприменимо. сценарии, svg спрайт Это также может принести большое удобство в разработке.

Ссылаться на

  1. Ссылка на элемент SVG
  2. SVG with USE tag not rendering
  3. Будущее должно быть жарким: внедрение технологии SVG Sprite
  4. Styling SVG Content with CSS
  5. Icon System with SVG Sprites
Категории