Я ♥ Svg — Владимир Кузнецов, Engine6
•
3 likes•1,733 views
Обилие устройств с высоким разрешением экранов подталкивает разработчиков к использованию пиктограмм в векторных форматах. Шрифтовые иконки так и не стали универсальным средством из-за проблем с отображением. В докладе Владимир расскажет об использовании SVG для пиктограмм: о том, как собрать файл с контурами, как добавить их на страницу и как избежать типичных проблем.
Recommended
Recommended
More Related Content
What's hot
What's hot (6)
Viewers also liked
Viewers also liked (20)
Similar to Я ♥ Svg — Владимир Кузнецов, Engine6
Similar to Я ♥ Svg — Владимир Кузнецов, Engine6 (20)
More from Yandex
More from Yandex (20)
Я ♥ Svg — Владимир Кузнецов, Engine6
- 1. Я SVG Владимир Кузнецов, Engine6
- 2. Какие есть способы отображения SVG в браузере? — background-image
- 3. SVG фоном у элемента .icon { background-image: url('external.svg'); } .another-icon { background-image: url('data:image/svg+xml;base64,…'); } 01. 02. 03. 04. 05. 06.
- 4. Какие есть способы отображения SVG в браузере? — background-image — <img> — <object>, <embed>, <iframe>
- 6. <!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.
- 8. <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.
- 9. <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.
- 10. <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.
- 11. <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.
- 12. <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.
- 13. <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.
- 15. Почему бы не сослаться на внешний файл? <svg xmlns="http://www.w3.org/2000/svg"> <use xlink:href=" external.svg#icon_nav_up "></use> </svg> По стандарту в ссылке можно использовать любой интернационализированный идентификатор ресурса. 01. 02. 03.
- 17. Мы пробовали: 1. менять значение атрибута xlink:href после загрузки страницы; 2. асинхронно подгружать SVG-файлы; 3. кешировать SVG-файлы в LocalStorage; 4. … В итоге нашли оптимальную последовательность действий.
- 18. Шаг 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.
- 19. Шаг 2 Подключаем скрипт в <head> <script src="svg-icon.js"></script>
- 20. Шаг 3 Добавляем на страницу пустой <div> <div id="svg-icon-placeholder"></div>
- 21. Шаг 4 Вставляем содержимое строки, которое мы подготовили на первом шаге, в элемент, который мы добавили на третьем шаге. <script> document.getElementById('svg-icon-placeholder') .innerHTML(icon); </script> 01. 02. 03. 04.
- 22. Плюсы: — метод работает во всех браузерах; — пиктограммы кэшируются на стороне клиента; — нет лишних запросов на сервер. Минусы: — без JS ничего не отобразится.
- 24. grunt-svg2string 1. преобразует содержимое файла в строку; 2. объединяет несколько файлов в один; 3. конвертирует отдельные SVG в <symbol>.
- 25. Демонстрация
- 26. .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.
- 27. .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.
- 28. .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.
- 29. .icon { transition: transform 0.5s; transform-origin: 100% 0; } .icon:hover { transform: scale(1.75); } 01. 02. 03. 04. 05. 06. 07.
- 30. <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.
- 31. <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.
- 33. <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.
- 36. Альтернативы для старых браузеров
- 37. Альтернативная пиктограмма .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.
- 39. <svg> <svg xmlns="http://www.w3.org/2000/svg"> <title>Search</title> <desc>Sitewide keyword search</desc> … </svg> 01. 02. 03. 04. 05.
- 40. Спасибо! Владимир Кузнецов noteskeeper.ru @mista_k