Embed Size (px)
DESCRIPTION
Обилие устройств с высоким разрешением экранов подталкивает разработчиков к использованию пиктограмм в векторных форматах. Шрифтовые иконки так и не стали универсальным средством из-за проблем с отображением. В докладе Владимир расскажет об использовании SVG для пиктограмм: о том, как собрать файл с контурами, как добавить их на страницу и как избежать типичных проблем.
Citation preview
Какие есть способыотображения SVG в браузере?
— background-image
SVG фоном у элемента
.icon {
background-image: url('external.svg');
}
.another-icon {
background-image: url('data:image/svg+xml;base64,…');
}
01.
02.
03.
04.
05.
06.
Какие есть способыотображения SVG в браузере?
— background-image
— <img>
— <object>, <embed>, <iframe>
Встраивание<svg>
<!DOCTYPE html>
<html>
…
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20">
<path d="M15 12l-5-5-5 5 1 1 4-4 4 4 1-1z"></path>
</svg>
…
</html>
01.
02.
03.
04.
05.
06.
07.
08.
09.
<defs>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<path d="M15 12l-5-5-5 5 1 1 4-4 4 4 1-1z"
id="icon_nav_up"></path>
</defs>
</svg>
01.
02.
03.
04.
05.
06.
<defs>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<path d="M15 12l-5-5-5 5 1 1 4-4 4 4 1-1z"
id ="icon_nav_up"></path>
</defs>
</svg>
01.
02.
03.
04.
05.
06.
<use>
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20">
<use xlink:href=" #icon_nav_up "></use>
</svg>
01.
02.
03.
04.
<use>
<svg xmlns="http://www.w3.org/2000/svg"
viewBox ="0 0 20 20">
<use xlink:href="#icon_nav_up"></use>
</svg>
01.
02.
03.
04.
<symbol>
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id ="icon_nav_up" viewBox="0 0 20 20">
<path d="M15 12l-5-5-5 5 1 1 4-4 4 4 1-1z"></path>
</symbol>
</svg>
01.
02.
03.
04.
05.
<symbol>
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="icon_nav_up" viewBox ="0 0 20 20">
<path d="M15 12l-5-5-5 5 1 1 4-4 4 4 1-1z"></path>
</symbol>
</svg>
01.
02.
03.
04.
05.
«Библиотека»контуров
Почему бы не сослатьсяна внешний файл?
<svg xmlns="http://www.w3.org/2000/svg">
<use xlink:href=" external.svg#icon_nav_up "></use>
</svg>
По стандарту в ссылке можно использовать любой
интернационализированный идентификатор ресурса.
01.
02.
03.
Мы пробовали:
1. менять значение атрибута xlink:href после загрузки страницы;
2. асинхронно подгружать SVG-файлы;
3. кешировать SVG-файлы в LocalStorage;
4. …
В итоге нашли оптимальную последовательность действий.
Шаг 1
Преобразуем SVG в строку JavaScript
var icon = '<svg xmlns="http://www.w3.org/2000/svg">' +
'<symbol id="icon_nav_up" viewBox="0 0 20 20"><pat' +
'h d="M15 12l-5-5-5 5 1 1 4-4 4 4 1-1z"></path></s' +
'ymbol></svg>';
01.
02.
03.
04.
Шаг 2
Подключаем скрипт в <head>
<script src="svg-icon.js"></script>
Шаг 3
Добавляем на страницу пустой <div>
<div id="svg-icon-placeholder"></div>
Шаг 4
Вставляем содержимое строки, которое мы подготовили на первом
шаге, в элемент, который мы добавили на третьем шаге.
<script>
document.getElementById('svg-icon-placeholder')
.innerHTML(icon);
</script>
01.
02.
03.
04.
Плюсы:
— метод работает во всех браузерах;
— пиктограммы кэшируются на стороне клиента;
— нет лишних запросов на сервер.
Минусы:
— без JS ничего не отобразится.
Автоматизируемпроцесс
grunt-svg2string
1. преобразует содержимое файла в строку;
2. объединяет несколько файлов в один;
3. конвертирует отдельные SVG в <symbol>.
Демонстрация
.icon {
transition: fill 0.5s;
}
.icon:hover {
fill: blue;
}
<svg class="icon">
<use xlink:href="#icon_heart"></use>
</svg>
01.
02.
03.
04.
05.
06.
01.
02.
03.
.icon {
transition: transform 0.5s;
}
.icon:hover {
transform: scale(1.75);
}
<svg class="icon">
<use xlink:href="#icon_heart"></use>
</svg>
01.
02.
03.
04.
05.
06.
01.
02.
03.
.icon > use {
transition: transform 0.5s;
}
.icon:hover > use {
transform: scale(1.75);
}
<svg class="icon">
<use xlink:href="#icon_heart"></use>
</svg>
01.
02.
03.
04.
05.
06.
01.
02.
03.
.icon {
transition: transform 0.5s;
transform-origin: 100% 0;
}
.icon:hover {
transform: scale(1.75);
}
01.
02.
03.
04.
05.
06.
07.
<svg class="icon">
<use xlink:href="#icon_heart_left"
class="icon__left></use>
<use xlink:href="#icon_heart_right"
class="icon__right></use>
</svg>
01.
02.
03.
04.
05.
06.
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<symbol id="icon-1">
<g class="group-1">…</g>
<g class="group-2">…</g>
</symbol>
<p class="path" d="…"></p>
</defs>
</svg>
01.
02.
03.
04.
05.
06.
07.
08.
09.
SVG SMILanimation
<pattern id="animated-spiral-pattern"
x="0" y="0" width="1" height="1">
<animateTransform attributeName="patternTransform"
attributeType="XML" type="rotate"
from="360 90 90" to="0 90 90" dur="3s"
repeatCount="indefinite"></animateTransform>
<g id="spiral-shape">…</g>
</pattern>
01.
02.
03.
04.
05.
06.
07.
08.
<use/>vs.<use></use>
Альтернативыдля старыхбраузеров
Альтернативная пиктограмма
.icon {
display: inline-block; /* или block */
width: 32px;
height: 32px;
}
.no-svg .icon {
background: url('icon.png') no-repeat 0 0;
}
01.
02.
03.
04.
05.
06.
07.
08.
Доступностьсодержимого
<svg>
<svg xmlns="http://www.w3.org/2000/svg">
<title>Search</title>
<desc>Sitewide keyword search</desc>
…
</svg>
01.
02.
03.
04.
05.
Спасибо!
Владимир Кузнецов
noteskeeper.ru
@mista_k
![wildcard72.files.wordpress.com · Web view[ ] [ ] [🙏] [♫] [🌿] [*] [ : ] [♥♥♥] ] [ [:))] [🙏] [♫] [🌿] [*] [ : ] [♥♥♥] ] [ [:))] [🙏] [♫] [🌿] [*]](https://img.pdfslide.tips/doc/110x75/602ccf4eada9400256693c63/web-view-a-oe-aaa-a.jpg)
