HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд. - Фрэйн .

.item {

    background: url('image.png') no-repeat;

    background: url('image.svg') left top / auto auto no-repeat;

}

Когда в коде CSS применяются два одинаковых свойства, нижестоящим свойством всегда переписывается то свойство, что стоит выше его. В правиле CSS браузер всегда будет игнорировать ту пару «свойство — значение», в которой он не может разобраться. В данном случае устаревшие браузеры получат изображение в формате PNG, поскольку они не могут воспользоваться SVG или разобраться в лишенном префикса свойстве background-size, а более новые браузеры, которые могут воспользоваться и тем и другим, возьмут самое нижнее свойство, так как им отменяется первое свойство.

Альтернативные варианты можно предоставить с помощью JavaScript-средства Modernizr, предназначенного для тестирования функциональных возможностей браузера (более подробно Modernizr рассматривается в главе 5). В Modernizr содержатся отдельные тесты для различных методов вставки SVG-графики, а в следующей версии Modernizr (которая на момент написания книги еще не вышла) может содержаться что-нибудь более специфичное для SVG в CSS. Но пока вы можете сделать следующее:

.item {

    background-image: url('image.png');

}

.svg .item {

    background-image: url('image.svg');

}

Или инвертировать логику, если вам так удобнее:

.item {

    background-image: url('image.svg');

}

.no-svg .item {

    background-image: url('image.png');

}

Когда запросы возможностей (feature queries) получат более полную поддержку, можно будет также сделать следующее:

.item {

    background-image: url('image.png');

}

@supports (fill: black) {

    .item {

        background-image: url('image.svg');

    }

}

Правило @supports здесь сработает, поскольку fill является свойством SVG, и если браузер это понимает, то он предпочтет не верхнее, а нижнее правило.

Если ваши потребности в SVG-графике сводятся в основном к статичным фоновым изображениям и, возможно, значкам и т. п., я настоятельно рекомендую внедрять SVG-графику в качестве фоновых изображений. Для этого существует множество инструментальных средств, автоматически создающих спрайты изображений или ссылки на ресурсы в таблицах стилей (что означает включение SVG-графики в виде URI-идентификатора данных), альтернативные PNG-ресурсы и необходимые таблицы стилей из отдельных создаваемых вами SVG-изображений. Этот способ использования SVG-графики пользуется весьма широкой поддержкой, сами изображения неплохо кэшируются (следовательно, их использование приносит немалую выгоду с точки зрения производительности), и все это довольно просто реализовать.

Краткое отступление по поводу  URI-идентификаторов данных

Если при чтении предыдущего раздела у вас возник вопрос о том, что такое данные, на которые указывает унифицированный идентификатор ресурса (Uniform Resource Identifier (URI)), то по отношению к CSS он означает включение того, что обычно должно быть внешним ресурсом, например изображения, в сам CSS-файл. Поэтому мы можем сделать это, сославшись на внешний файл изображения:

.external {

    background-image: url('Star.svg');

}

Можно просто включить изображение в состав нашей таблицы стилей, воспользовавшись URI-идентификатором данных:

.data-uri {

    background-image: url(data:image/svg+xml,%3C%3Fxml%20

version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22

no%22%3F%3E%0A%3Csvg%20width%3D%22198px%22%20height%3D%22188px-

%22%20viewBox%3D%220%200%20198%20188%22%20version%3D%221.1%22%20

xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink

%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xmlns%3Asketch%3

D%22http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%2Fns%22%3E%0A%20

%20%20%20%3C%21--%20Generator%3A%20Sketch%203.2.2%20%2 89983%29%20

-%20http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%20--%3E%0A%20

%20%20%20%3Ctitle%3EStar%201%3C%2Ftitle%3E%0A%20%20%20%20

%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0A%20%20%20%20-

%3Cdefs%3E%3C%2Fdefs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20

stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20

fill-rule%3D%22evenodd%22%20sketch%3Atype%3D%22MSPage%22%3E%

0A%20%20%20%20%20%20%20%20%3Cpolygon%20id%3D%22Star-1%22%20

stroke%3D%22%239 79797%22%20stroke-width%3D%223%22%20

fill%3D%22%23F8E81C%22%20sketch%3Atype%3D%22MSShapeGroup%22%20

points%3D%2299%20154%2040.2214748%20184.901699%2051.4471742%20119.45085%203.89434837%2073.0983006%2069.6107374%2063.5491503%2099%204%20128.389263%2063.5491503%20194.105652%2073.0983006%20146.552826%20119.45085%20157.778525%20184.9 01699%20%22%3E%3C%2Fpolygon%3E%0A%20%20

%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E);

}

Выглядит все это не очень привлекательно, но зато обеспечивает способ избавления от отдельного запроса по сети. Существуют различные методы кодирования URI-идентификаторов данных, и имеется множество средств, доступных для создания таких идентификаторов из ваших ресурсов.

Если кодировать SVG-графику таким вот образом, то я посоветую не пользоваться методом base64, поскольку SVG-содержимое не сжимается им так же хорошо, как текст.

Создание спрайтов изображений

Лично я рекомендую для создания спрайтов изображений или ресурсов, состоящих из URI-идентификаторов данных, использовать средство Iconizr (http://iconizr.com/). Оно обеспечивает полный контроль над внешним видом получаемого в конечном итоге SVG- и альтернативного PNG-ресурса. Можно вывести SVG-графику и альтернативные PNG-файлы в виде URI-идентификаторов данных или спрайтов изображений и даже включить туда фрагмент кода JavaScript для загрузки подходящего ресурса, если выбор будет сделан в пользу URI-идентификаторов данных. Настоятельно советую воспользоваться именно этим средством.

Если вы колеблетесь, не зная, что выбрать для своих проектов — URI-иденти­фикаторы данных или спрайты изображений, то вас могут заинтересовать дополнительные исследования, которые я провел, чтобы взвесить все «за» и «против» обоих вариантов: http://benfrain.com/image-sprites-data-uris-icon-fonts-v-svgs/.

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

Непосредственная вставка SVG

Поскольку SVG-графика — это просто XML-документ, ее можно вставить непосредственно в код HTML, например:

<div>

    <h3>Inserted 'inline':</h3>

    <span class="inlineSVG">

        <svg id="svgInline" width="198" height="188" viewBox="00198188" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

        <title>Star 1</title>

            <g class="star_Wrapper" fill="none" fill-rule="evenodd">

                <path id="star_Path" stroke="#979797" stroke-

width="3" fill="#F8E81C" d="M99154l-58.7830.902 11.227-65.45L3.89473.097l65.717-9.55L994l29.39 59.5565.716 9.548-47.55346.35311.22665.452z" />

            </g>

        </svg>

    </span>

</div>

Элемент не нуждается в каком-либо особом контейнере, SVG-разметка буквально вставляется в разметку HTML. Полезно будет также знать, что при удалении из элемента svg любых атрибутов width и height SVG-графика будет подогнана под размер того элемента, в котором она содержится.

Вставка SVG-графики в ваш документ — наверное, самый универсальный способ реализации возможностей технологии SVG.

Повторное использование графических объектов из символов

Ранее в главе я уже упомянул о том, что выбрал и загрузил ряд значков с сайта http://icomoon.io. Это были значки, изображающие жестикуляцию, используемую при работе на сенсорных устройствах: скольжение, движение двумя пальцами в разные стороны и т. д. Предположим, на создаваемом вами сайте нужно использовать эти значки не один раз. Помните, я говорил, что была версия этих значков в виде определений SVG-символов? Именно она нам сейчас и пригодится.

В код, который находится в файле каталога example_07-09, мы будем вставлять определения различных символов в имеющийся на странице defs-элемент SVG-графики. Следует заметить, что в отношении SVG-элемента использовано встроенное в код стилевое оформление display:none, а для атрибутов height и width установлены нулевые значения (эти же стилевые настройки при желании могут быть установлены и в таблице CSS). По этой причине SVG-графика не занимает никакого пространства. Этот SVG-элемент используется только для размещения в нем символов графических объектов, которые мы собираемся использовать в других местах.

Итак, наша разметка начинается со следующего фрагмента кода:

<body>

    <svg display="none" width="0" height="0" version="1.1"

xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.

w3.org/1999/xlink">

    <defs>

    <symbol id="icon-drag-left-right" viewBox="0013441024">

        <title>drag-left-right</title>

        <path class="path1" d="M256192v-160l-224224224224v-160h256v-128z"></path>

Заметили, что внутри элемента defs находится элемент symbol? Он предназначен для использования в том случае, если нам понадобится определить фигуру для последующего повторного применения.

После того как SVG определяет все необходимые для нашей работы символы, у нас имеется вся обычная HTML-разметка. Затем, когда нужно будет воспользоваться одним из таких символов, можно сделать следующее:

<svg class="icon-drag-left-right">

    <use xlink:href="#icon-drag-left-right"></use>

</svg>

В результате появится значок перемещения влево-вправо.

Вся магия заключается в элементе use. Исходя из его имени, нетрудно догадаться, что он применяется для использования существующих графических объектов, которые уже были где-то определены. Механизм конкретной ссылки заложен в атрибуте xlink, который в данном случае ссылается на идентификатор символа значка перемещения влево-вправо (#icon-drag-left-right), вставленного в код в самом начале разметки.