Для тех, кто не знаком, SVG — это, по сути, набор кода, рисующего изображение (я знаю, что это очень упрощенное определение). Он может содержаться в файле с расширением .svg или может быть встроен прямо в HTML внутри элемента ‹svg› (это связанный или встроенный SVG — здесь не нужно обсуждать, что лучше, они оба имеют преимущества). . Внутри этого файла (или элемента) вы можете добавить код для создания более одного изображения. Это кодовая версия спрайта CSS (вместо инструмента редактирования изображения вы можете использовать HTML) — он называется спрайтом SVG, и до сих пор мне было ужасно с ним иметь дело.

На прошлой неделе я был на встрече с клиентом и заметил, что фронтенд-разработчик на другом конце провода использует синтаксис значков, которого я раньше не видел:

<svg aria-hidden="true" class="icon icon-archive">
    <use xlink:href="img/svg-defs.svg#icon-archive"></use>
</svg>

Я сразу влюбился. Я видел это использование без пути к изображению, только хэш URL, но никогда с ним. Мы какое-то время выдумывали об этом. Хэш в конечном итоге связан с идентификатором внутри файла SVG, и вы можете создать их вручную или сгенерировать их с помощью такого инструмента, как IcoMoon (используйте инструмент). Я немедленно начал исследовать и нашел сводку новостей от Chris Coyier на тему Создание системы иконок с помощью спрайтов SVG.

Внизу этой статьи был синтаксис, аналогичный приведенному выше, с примечанием о том, насколько плоха поддержка в Internet Explorer. Концепция использования идентификаторов фрагментов работает в IE9+, но полюбившийся мне синтаксис (с использованием пути к изображению) не работает ни в одной версии Internet Explorer. Я был убит горем (и чрезмерно драматичен).

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

Полифилл

Вспомнив, что Интернет — прекрасное место для работы, я начал писать полифилл, чтобы этот синтаксис работал так, как я хотел, во всех местах, где хотел. Он есть на Github, и я назвал его SVG Icon Sprite Polyfill. Я также немного изменил синтаксис, чтобы упростить доступность:

<svg role="img" aria-label="Golf clubs in a bag" class="icon icon-add-to-my-bag">
    <title>Golf clubs in a bag</title>
    <use xlink:href="img/svg-defs.svg#icon-add-to-my-bag"></use>
</svg>

Добавление атрибута role и aria-label делает этот значок доступным для программ чтения с экрана, а не полностью скрывает его. Мне так больше нравится.

Использование этого синтаксиса с JavaScript в полифилле будет работать в Internet Explorer 9+. Я остановился на IE 9, потому что SVG в любом случае не работают в IE8, поэтому их нужно будет снова заполнить PNG, JPG или GIF. По сути, он создает синтаксис, поддерживаемый IE, запуская ajax-вызов SVG-файла, вставляя его в документ и скрывая его. "Проще простого".

Скачай или разветви полифилл и дай мне знать, что ты думаешь!