SVG-изображения можно вставлять непосредственно в html код, можно использовать символьные спрайты, теги , и даже </code>. Можно подключать <code>SVG</code> через <code>data-url</code>, <code>css-backgrounds</code>, <code>css-filters</code> и еще множеством способов. Но чтобы полноценно использовать всю суперсилу <code>SVG</code>, необходимо вставлять <code>SVG</code>-изображения непосредственно в <code>html</code>-разметку. Хотя на самом деле есть еще один способ. И он <em>удобный</em>.</p> <h2>Суперсила SVG</h2> <p>Одна из самых сильных сторон технологии <code>SVG</code> — возможность манипулировать стилями изображений через <code>css</code>. Это особенно важно для иконок, которые обязательно захочется подсветить на <code>hover</code> без использования дополнительных изображений.</p> <p>Чтобы иметь возможность перекрашивать <code>SVG</code> через <code>css</code>, необходимо либо вставить <code>SVG</code> непосредственно в <code>html</code>, то есть »<em>заинлайнить</em>» их, либо использовать отдельный файл, символьный спрайт. Спрайт также должен быть вставлен в DOM. Ни одна другая техника не позволяет получить доступ к <code>SVG</code> из <code>css</code>. Рассмотрим эти техники подробнее.</p> <h2>Инлайнинг</h2> <p>Вставка <code>SVG</code> непосредственно в <code>html</code> это одновременно и самая простая и самая мощная с точки зрения кастомизации и манипуляции изображением техника.</p> <pre><code class="xml"><span> <svg viewBox="0 0 16 16" width="16" height="16"> <!-- SVG --> </svg> </span></code></pre> <p>Такое изображение можно стилизовать через css, менять практически любое свойство и атрибут, даже анимировать его отдельные части. Но здесь есть ряд существенных ограничений: </p> <ol><li><p>Если изображение большое, вся страница будет загружаться дольше</p></li><li><p>Использование этой техники в js-фреймворках, даже с такими крайне мощными инструментами, как SVGR, сильно увеличивает размер js-бандла.</p></li><li><p>Теряется контроль над загрузкой <code>SVG</code>, они перестают быть внешними изображениями. Вы не можете отдельно их хранить и кешировать, пренебречь их загрузкой на плохих соединениях и т.д.</p></li></ol> <h2>Спрайт символов</h2> <p>Другой способ встраивания SVG, который позволяет стилизовать изображения через css, предполагает использование спрайта, состоящего из элементов <code><symbol></code>. Контент изображения хранится в отдельном скрытом файле и подключается в нужное место на странице через тег <code><use></code>.</p> <pre><code class="xml"><!-- Спрайт символов наверху страницы --> <svg style="display:none"> <symbol id="icon" viewBox="0 0 16 16" width="16" height="16"> <!-- SVG --> </symbol> </svg> <!-- Использование --> <span> <svg><use href="#icon" /></svg> </span></code></pre> <p>А если вы, как и Microsoft, не поддерживаете IE11, спрайт символов можно загружать по HTTP.</p> <pre><code class="xml"><svg> <use href="https://cdn.net/sprite.svg#example"/> </svg></code></pre> <p>К сожаление, использовать такой подход напрямую, то есть загрузить по HTTP содержимое отдельного <code>SVG</code>-изображения не получится, нужен именно спрайт. Вот так <strong>работать не будет: </strong></p> <pre><code class="xml"><svg> <use href="https://cdn.net/icon.svg"/> </svg></code></pre> <p>К изображениям, подключенным через спрайт, можно получить доступ через <code>css</code>, правда, есть ограничения. Стилям не »<em>пробиться</em>» через shadow-boundary, границу, за которой начинается shadow-DOM и которая описывается тегом <code><use></code>.</p> <p>Хорошие новости в том, что каскад продолжает работать, можно менять атрибуты <code>fill</code> и использовать <code>currentColor</code> в любом свойстве. Для большинства кейсов с иконками этого более чем достаточно: </p> <pre><code class="xml"><!-- Спрайт --> <svg style="display:none"> <symbol id="icon"> <path fill="currentColor"> </symbol> </svg> <!-- Добавляем иконке css-класс --> <span> <svg class="icon"><use href="#icon" /></svg> </span> <!-- Красим SVG через css --> <style> .icon { color: rebeccapurple; } </style></code></pre> <p>Спрайты удобны, но у них немало своих проблем, главная из которых — они плохо расширяемы. В конечном итоге спрайты разрастаются до огромных размеров и целиком подключаются на страницы ради использования одной-двух иконок.</p> <h2>Компромисс</h2> <p>Здесь не обойтись без компромисса. Нужно решение, которое загрузит на страницу только необходимые <code>SVG</code>-изображения, не будет рендерить их через javascript и позволит стилизовать их через <code>css</code>.</p> <p>Таким решением может быть браузерный <code>fetch</code>! Нам нужен инструмент, который </p> <ol><li><p>Загрузит <code>SVG</code>-изображения в браузере через <code>fetch</code> и закеширует их</p></li><li><p>Добавит их в символьный спрайт</p></li><li><p>Предоставит API для использования загруженных изображений в произвольном участке страницы через тег <code><use></code>.</p></li></ol> <p>Первым о таком решении задумался Chris Coyier еще в 2015 году, но оно так и не было оформлено и ждало своего дня. Сегодня этот день настал.</p> <h3>Handy SVG</h3> <p>Реализация называется <strong>Handy SVG</strong>, исходники и документация доступны на github, пакет публикуется в <code>npm</code>. Вам достаточно установить его: </p> <pre><code class="bash">npm i handy-svg</code></pre> <p>И использовать в <code>React</code>: </p> <pre><code class="javascript">import {HandySvg} from 'handy-svg'; import iconSrc from './icon.svg'; export const Icon = () => ( <HandySvg src={iconSrc} className="icon" width="32" height="32" /> );</code></pre> <p>Или в любом другом проекте с ванильным javascript: </p> <pre><code class="javascript">import {injector} from 'handy-svg/lib/injector'; const src = "https://cdn-server.net/icon.svg"; // Загружает изображения и добавляет их в спрайт injector.load(src); // Доступ к id изображения const id = injector.getId(src); // Использование const svg = `<svg class="icon"><use href="#${id}" /></svg>`;</code></pre> <p>Никаких проблем со стилизацией не возникнет: </p> <pre><code class="css">.icon { color: rebeccapurple; }</code></pre> <p>На страницу будут загружаться только необходимые изображения, вы сможете их закешировать, а в SPA-приложениях запросы конечно же не будут отправляться дважды. Ваш спрайт не будет разрастаться и вы вообще не будете задумываться о его существовании.</p> <p>Конечно это решение имеет ряд ограничений. Например, почти невозможно избавиться от FONI (Flash of No Icons), состояния загрузки, при котором на странице отсутствуют иконки. Тем не менее, из всех возможных способов работы с <code>SVG</code>-изображениями в вебе, этот представляется наиболее удобным.</p> <p>Пул-реквесты приветствуются и я буду рад любому фидбеку.</p> <p class="copyrights"><span class="source">© <a target="_blank" rel="nofollow" href="https://habr.com/ru/post/672984/?utm_campaign=672984&amp;utm_source=habrahabr&amp;utm_medium=rss">Habrahabr.ru</a></span></p> </div> <br> <!--<div align="left"> <script type="text/topadvert"> load_event: page_load feed_id: 12105 pattern_id: 8187 tech_model: </script><script type="text/javascript" charset="utf-8" defer="defer" async="async" src="//loader.topadvert.ru/load.js"></script> </div> <br>--> <div style="padding-left: 20px;"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2514821055276660" crossorigin="anonymous"></script> <!-- PCNews 336x280 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-2514821055276660" data-ad-slot="1200562049" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <!-- comments --> <noindex> <div style="margin: 25px;" id="disqus_thread"></div> <script type="text/javascript"> var disqus_shortname = 'pcnewsru'; var disqus_identifier = '1178743'; var disqus_title = 'Еще один способ использовать SVG в React. На этот раз удобный'; var disqus_url = 'http://pcnews.ru/blogs/ese_odin_sposob_ispolzovat_svg_v_react_na_etot_raz_udobnyj-1178743.html'; (function() { var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); })(); </script> <!--<noscript>Please enable JavaScript to view the <a rel="nofollow" href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>--> <!--<a href="http://disqus.com" rel="nofollow" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>--> </noindex> </div> <br class="clearer"/> </div> <br class="clearer"/> <div id="footer-2nd"></div> <div id="footer"> <br/><br/> <ul class="horz-menu"> <li class="about"><a href="/info/about.html" title="О проекте">О проекте</a></li> <li class="additional-menu"><a href="/archive.html" title="Архив материалов">Архив</a> </li> <li class="additional-menu"><a href="/info/reklama.html" title="Реклама" class="menu-item"><strong>Реклама</strong></a> <a href="/info/partners.html" title="Партнёры" class="menu-item">Партнёры</a> <a href="/info/legal.html" title="Правовая информация" class="menu-item">Правовая информация</a> <a href="/info/contacts.html" title="Контакты" class="menu-item">Контакты</a> <a href="/feedback.html" title="Обратная связь" class="menu-item">Обратная связь</a></li> <li class="email"><a href="mailto:pcnews@pcnews.ru" title="Пишите нам на pcnews@pcnews.ru"><img src="/media/i/email.gif" alt="e-mail"/></a></li> <li style="visibility: hidden"> <noindex> <!-- Rating@Mail.ru counter --> <script type="text/javascript"> var _tmr = window._tmr || (window._tmr = []); _tmr.push({id: "93125", type: "pageView", start: (new Date()).getTime()}); (function (d, w, id) { if (d.getElementById(id)) return; var ts = d.createElement("script"); ts.type = "text/javascript"; ts.async = true; ts.id = id; ts.src = (d.location.protocol == "https:" ? "https:" : "http:") + "//top-fwz1.mail.ru/js/code.js"; var f = function () { var s = d.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ts, s); }; if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); } })(document, window, "topmailru-code"); </script> <noscript> <div style="position:absolute;left:-10000px;"> <img src="//top-fwz1.mail.ru/counter?id=93125;js=na" style="border:0;" height="1" width="1" alt="Рейтинг@Mail.ru"/> </div> </noscript> <!-- //Rating@Mail.ru counter --> </noindex> </li> </ul> </div> <!--[if lte IE 7]> <iframe id="popup-iframe" frameborder="0" scrolling="no">
SVG
html
</code>. Можно подключать <code>SVG</code> через <code>data-url</code>, <code>css-backgrounds</code>, <code>css-filters</code> и еще множеством способов. Но чтобы полноценно использовать всю суперсилу <code>SVG</code>, необходимо вставлять <code>SVG</code>-изображения непосредственно в <code>html</code>-разметку. Хотя на самом деле есть еще один способ. И он <em>удобный</em>.</p> <h2>Суперсила SVG</h2> <p>Одна из самых сильных сторон технологии <code>SVG</code> — возможность манипулировать стилями изображений через <code>css</code>. Это особенно важно для иконок, которые обязательно захочется подсветить на <code>hover</code> без использования дополнительных изображений.</p> <p>Чтобы иметь возможность перекрашивать <code>SVG</code> через <code>css</code>, необходимо либо вставить <code>SVG</code> непосредственно в <code>html</code>, то есть »<em>заинлайнить</em>» их, либо использовать отдельный файл, символьный спрайт. Спрайт также должен быть вставлен в DOM. Ни одна другая техника не позволяет получить доступ к <code>SVG</code> из <code>css</code>. Рассмотрим эти техники подробнее.</p> <h2>Инлайнинг</h2> <p>Вставка <code>SVG</code> непосредственно в <code>html</code> это одновременно и самая простая и самая мощная с точки зрения кастомизации и манипуляции изображением техника.</p> <pre><code class="xml"><span> <svg viewBox="0 0 16 16" width="16" height="16"> <!-- SVG --> </svg> </span></code></pre> <p>Такое изображение можно стилизовать через css, менять практически любое свойство и атрибут, даже анимировать его отдельные части. Но здесь есть ряд существенных ограничений: </p> <ol><li><p>Если изображение большое, вся страница будет загружаться дольше</p></li><li><p>Использование этой техники в js-фреймворках, даже с такими крайне мощными инструментами, как SVGR, сильно увеличивает размер js-бандла.</p></li><li><p>Теряется контроль над загрузкой <code>SVG</code>, они перестают быть внешними изображениями. Вы не можете отдельно их хранить и кешировать, пренебречь их загрузкой на плохих соединениях и т.д.</p></li></ol> <h2>Спрайт символов</h2> <p>Другой способ встраивания SVG, который позволяет стилизовать изображения через css, предполагает использование спрайта, состоящего из элементов <code><symbol></code>. Контент изображения хранится в отдельном скрытом файле и подключается в нужное место на странице через тег <code><use></code>.</p> <pre><code class="xml"><!-- Спрайт символов наверху страницы --> <svg style="display:none"> <symbol id="icon" viewBox="0 0 16 16" width="16" height="16"> <!-- SVG --> </symbol> </svg> <!-- Использование --> <span> <svg><use href="#icon" /></svg> </span></code></pre> <p>А если вы, как и Microsoft, не поддерживаете IE11, спрайт символов можно загружать по HTTP.</p> <pre><code class="xml"><svg> <use href="https://cdn.net/sprite.svg#example"/> </svg></code></pre> <p>К сожаление, использовать такой подход напрямую, то есть загрузить по HTTP содержимое отдельного <code>SVG</code>-изображения не получится, нужен именно спрайт. Вот так <strong>работать не будет: </strong></p> <pre><code class="xml"><svg> <use href="https://cdn.net/icon.svg"/> </svg></code></pre> <p>К изображениям, подключенным через спрайт, можно получить доступ через <code>css</code>, правда, есть ограничения. Стилям не »<em>пробиться</em>» через shadow-boundary, границу, за которой начинается shadow-DOM и которая описывается тегом <code><use></code>.</p> <p>Хорошие новости в том, что каскад продолжает работать, можно менять атрибуты <code>fill</code> и использовать <code>currentColor</code> в любом свойстве. Для большинства кейсов с иконками этого более чем достаточно: </p> <pre><code class="xml"><!-- Спрайт --> <svg style="display:none"> <symbol id="icon"> <path fill="currentColor"> </symbol> </svg> <!-- Добавляем иконке css-класс --> <span> <svg class="icon"><use href="#icon" /></svg> </span> <!-- Красим SVG через css --> <style> .icon { color: rebeccapurple; } </style></code></pre> <p>Спрайты удобны, но у них немало своих проблем, главная из которых — они плохо расширяемы. В конечном итоге спрайты разрастаются до огромных размеров и целиком подключаются на страницы ради использования одной-двух иконок.</p> <h2>Компромисс</h2> <p>Здесь не обойтись без компромисса. Нужно решение, которое загрузит на страницу только необходимые <code>SVG</code>-изображения, не будет рендерить их через javascript и позволит стилизовать их через <code>css</code>.</p> <p>Таким решением может быть браузерный <code>fetch</code>! Нам нужен инструмент, который </p> <ol><li><p>Загрузит <code>SVG</code>-изображения в браузере через <code>fetch</code> и закеширует их</p></li><li><p>Добавит их в символьный спрайт</p></li><li><p>Предоставит API для использования загруженных изображений в произвольном участке страницы через тег <code><use></code>.</p></li></ol> <p>Первым о таком решении задумался Chris Coyier еще в 2015 году, но оно так и не было оформлено и ждало своего дня. Сегодня этот день настал.</p> <h3>Handy SVG</h3> <p>Реализация называется <strong>Handy SVG</strong>, исходники и документация доступны на github, пакет публикуется в <code>npm</code>. Вам достаточно установить его: </p> <pre><code class="bash">npm i handy-svg</code></pre> <p>И использовать в <code>React</code>: </p> <pre><code class="javascript">import {HandySvg} from 'handy-svg'; import iconSrc from './icon.svg'; export const Icon = () => ( <HandySvg src={iconSrc} className="icon" width="32" height="32" /> );</code></pre> <p>Или в любом другом проекте с ванильным javascript: </p> <pre><code class="javascript">import {injector} from 'handy-svg/lib/injector'; const src = "https://cdn-server.net/icon.svg"; // Загружает изображения и добавляет их в спрайт injector.load(src); // Доступ к id изображения const id = injector.getId(src); // Использование const svg = `<svg class="icon"><use href="#${id}" /></svg>`;</code></pre> <p>Никаких проблем со стилизацией не возникнет: </p> <pre><code class="css">.icon { color: rebeccapurple; }</code></pre> <p>На страницу будут загружаться только необходимые изображения, вы сможете их закешировать, а в SPA-приложениях запросы конечно же не будут отправляться дважды. Ваш спрайт не будет разрастаться и вы вообще не будете задумываться о его существовании.</p> <p>Конечно это решение имеет ряд ограничений. Например, почти невозможно избавиться от FONI (Flash of No Icons), состояния загрузки, при котором на странице отсутствуют иконки. Тем не менее, из всех возможных способов работы с <code>SVG</code>-изображениями в вебе, этот представляется наиболее удобным.</p> <p>Пул-реквесты приветствуются и я буду рад любому фидбеку.</p> <p class="copyrights"><span class="source">© <a target="_blank" rel="nofollow" href="https://habr.com/ru/post/672984/?utm_campaign=672984&amp;utm_source=habrahabr&amp;utm_medium=rss">Habrahabr.ru</a></span></p> </div> <br> <!--<div align="left"> <script type="text/topadvert"> load_event: page_load feed_id: 12105 pattern_id: 8187 tech_model: </script><script type="text/javascript" charset="utf-8" defer="defer" async="async" src="//loader.topadvert.ru/load.js"></script> </div> <br>--> <div style="padding-left: 20px;"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2514821055276660" crossorigin="anonymous"></script> <!-- PCNews 336x280 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-2514821055276660" data-ad-slot="1200562049" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <!-- comments --> <noindex> <div style="margin: 25px;" id="disqus_thread"></div> <script type="text/javascript"> var disqus_shortname = 'pcnewsru'; var disqus_identifier = '1178743'; var disqus_title = 'Еще один способ использовать SVG в React. На этот раз удобный'; var disqus_url = 'http://pcnews.ru/blogs/ese_odin_sposob_ispolzovat_svg_v_react_na_etot_raz_udobnyj-1178743.html'; (function() { var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); })(); </script> <!--<noscript>Please enable JavaScript to view the <a rel="nofollow" href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>--> <!--<a href="http://disqus.com" rel="nofollow" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>--> </noindex> </div> <br class="clearer"/> </div> <br class="clearer"/> <div id="footer-2nd"></div> <div id="footer"> <br/><br/> <ul class="horz-menu"> <li class="about"><a href="/info/about.html" title="О проекте">О проекте</a></li> <li class="additional-menu"><a href="/archive.html" title="Архив материалов">Архив</a> </li> <li class="additional-menu"><a href="/info/reklama.html" title="Реклама" class="menu-item"><strong>Реклама</strong></a> <a href="/info/partners.html" title="Партнёры" class="menu-item">Партнёры</a> <a href="/info/legal.html" title="Правовая информация" class="menu-item">Правовая информация</a> <a href="/info/contacts.html" title="Контакты" class="menu-item">Контакты</a> <a href="/feedback.html" title="Обратная связь" class="menu-item">Обратная связь</a></li> <li class="email"><a href="mailto:pcnews@pcnews.ru" title="Пишите нам на pcnews@pcnews.ru"><img src="/media/i/email.gif" alt="e-mail"/></a></li> <li style="visibility: hidden"> <noindex> <!-- Rating@Mail.ru counter --> <script type="text/javascript"> var _tmr = window._tmr || (window._tmr = []); _tmr.push({id: "93125", type: "pageView", start: (new Date()).getTime()}); (function (d, w, id) { if (d.getElementById(id)) return; var ts = d.createElement("script"); ts.type = "text/javascript"; ts.async = true; ts.id = id; ts.src = (d.location.protocol == "https:" ? "https:" : "http:") + "//top-fwz1.mail.ru/js/code.js"; var f = function () { var s = d.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ts, s); }; if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); } })(document, window, "topmailru-code"); </script> <noscript> <div style="position:absolute;left:-10000px;"> <img src="//top-fwz1.mail.ru/counter?id=93125;js=na" style="border:0;" height="1" width="1" alt="Рейтинг@Mail.ru"/> </div> </noscript> <!-- //Rating@Mail.ru counter --> </noindex> </li> </ul> </div> <!--[if lte IE 7]> <iframe id="popup-iframe" frameborder="0" scrolling="no">
