Урок 13. SVG в html
Как вставить svg в html. Вставляем inline svg в html-код
Привет! Сегодня рассмотрим, как правильно размещать svg-иконки на странице Inline-методом. Рассмотрим, как быть, когда валидатор ругается на одинаковые id. Поехали!
Итак, как вставить svg в html. Ну, на самом деле все довольно просто. Если Вы хотите вставить — берете и вставляете. <div class="item">
<div class="item__icon">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 611.989 611.988">
<g>
<g id="Wi-Fi">
<g>
<path d="M305...
Подборка инструментов для работы с SVG SVG — вид графики, которую образуют детали будущего изображения: линии, кривые, эллипсы, круги, прямоугольники. Картинки формата SVG легко масштабировать, а ещё они быстро загружаются, нет проблем с адаптивностью. В подборке собрали несколько инструментов, которые помогут разработчику в два клика оптимизировать и конвертировать графику формата SVG. SVGOMG hjakearchibald.github.io/...omg — оптимизация и очищение SVG от всякого мусора. SVG to bg hdenis-creative.com/...-bg — конвертер SVG-иконок в код для использования в CSS. Подробная инструкция прилагается на сайте автора. URL-encoder для SVG hyoksel.github.io/.../ru — конвертируем SVG для использования его в качестве background-image, border-image или mask.