Use SVG

Поскольку «Макбук» у меня с «ретиной», я давно озаботился тем, чтобы продукт, разработкой которого я управляю, хорошо смотрелся и на «ретине» тоже. Я считаю за такими экранами будущее и не грех позаботиться об этом будущем уже в настоящем. Если уж и не внедрить везде, так хоть научиться верстать.

Одним из главных помощников в такой вёрстке является, без сомнения, формаг СВГ — формат векторной графики, который на данный момент поддерживают все распространённые браузеры (включая ИЕ, с девятой версии). Особенно приятно, что его можно включать прямо внутрь ХТМЛя, это очень удобно — если СВГ используется для кучи мелких значков на странице, то не будет лишних соединений с сервером — ведь всё грузится вместе с основным кодом.

Но встаёт другая проблема — проблема повторного использования. Если одни и те же значки присутствуют на странице в изобилии, страница будет распухать, что печально.

К счастью, есть выход. СВГ — гибкая штука, в этом формате есть возможность использования частей изображения повторно. Первым шагом нужно определить тег-контейнер с необходимыми нам изображениями, по одному в теге symbol. У каждого из них будет собственный идентификатор, по которому мы ниже будем на них ссылаться:
<svg style="display:none">
    <symbol id="folder" viewBox="0 0 49.833 67.167">
        <!-- код не рабочий, только для примера -->
        <path d="M15.938,67.…"/>
        <path d="M3.59,30.531c…"/>
    </symbol>
    <symbol id="file" viewBox="0 0 49.833 67.167">
        <path d="M12.233c0.…"/>
        <path d="M3.28C2.76…"/>
    </symbol>
</svg>
Тут у нас два изображения — folder и file, на которые мы можем сослаться следующим образом:
<svg width="28" height="37">
    <use xlink:href="#folder"/>
</svg>

<svg width="28" height="37">
    <use xlink:href="#file"/>
</svg>
Таких вставок может быть сколько угодно и все они будут использовать одни и те же изображения, описанные в теге-контейнере. Остаётся даже возможность лёгкой настройки под себя, например, можно задать парочку классов и раскрасить часть изображения в разные цвета:
svg.green {
    fill: green;
}

svg.red {
    fill: red;
}
Классы можно повесить на ссылающиеся теги СВГ, жаль только этот способ полон ограничений. Кроме как в ФФ более избирательные селекторы использовать не удаётся — всё, что ниже тега use для таблицы стилей как будто не существует. Если и есть какой-то способ это починить, я его не нашёл.
28 июля 2014 23:09

greli (greli.livejournal.com)
28 июля 2014, 23:58

…всё, что ниже тега use для таблицы стилей как будто не существует.
Так и должно быть — это требование спецификации:
CSS2 selectors cannot be applied to the (conceptually) cloned DOM tree because its contents are not part of the formal document structure.
http://www.w3.org/TR/SVG/struct.html#UseElement

voldmar (voldmar.ru)
29 июля 2014, 00:15

http://css.yoksel.ru/ — оставлю для связности ссылку на блог чудеснейшей Йоксель, там много можно узнать про СВГ

BOLVERIN (инкогнито)
29 июля 2014, 01:16

примерно так же делают шрифты для игор вот уже лет 10-20 :) например в Mount&Blade
главное не делать таким же образом шрифты для браузера

Евгений Степанищев (bolknote.ru)
29 июля 2014, 06:07, ответ предназначен greli (greli.livejournal.com):

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

Евгений Степанищев (bolknote.ru)
29 июля 2014, 06:07, ответ предназначен BOLVERIN

примерно так же делают шрифты для игор вот уже лет 10—20 :)
Не понял комментарий.

Ваше имя или адрес блога (можно OpenID):

Текст вашего комментария, не HTML:

Кому бы вы хотели ответить (или кликните на его аватару)