Download as PDF, PPTX
Uploaded byYandex
Я ♥ Svg — Владимир Кузнецов, Engine6
Документ описывает различные способы отображения SVG в браузерах, включая использование background-image, тег <img>, а также встраиваемые элементы <object>, <embed> и <iframe>. Упоминается о возможностях использования <symbol> и <use> для управления SVG, а также о методах кэширования и асинхронной загрузки SVG-файлов. Важные плюсы и минусы таких методов также обсуждаются, включая их кроссбраузерную совместимость и необходимость использования JavaScript.
More Related Content
Я ♥ 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>
- 5.
- 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.
- 14.
- 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 ничего не отобразится.
- 23.
- 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"> <usexlink: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.
- 32.
- 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.
- 35.
- 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.
- 38.
- 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