Формат СВГ (англ. Scalable Vector Graphics) более‑менее знаком всем. С его помощью на страницы можно встраивать векторную графику. СВГ‑элементы можно анимировать, управлять ими извне и проделывать другие трюки. Но как это работает?
Дело в том, что формат СВГ — родственник языка разметки ХТМЛ. Браузеры понимают его, и с ним можно делать всё то же самое, что и с ХТМЛ, — менять содержимое узлов, управлять атрибутами, стилизовать с помощью ЦСС:
Картинки в формате СВГ — обычные текстовые файлы, которые понимают браузеры. Если открыть СВГ в текстовом редакторе, там будет нечто похожее по структуре на ХТМЛ:
<svg xmlns="http://www.w3.org/2000/svg" width="140px" height="30px" viewBox="0 0 139.811 30"><path d="M106.067.044c-9.4,0-15.718,6.444-15.718,15.109,0,8.8,6.183,14.848,14.586,14.848,9.971,0,15.5-7.4,15.5-15.806A14.117,14.117,0,0,0,106.067.044Zm-.784,27.3c-7.141,0-11.93-4.833-11.93-12.192,0-7.663,4.964-12.5,11.843-12.5,7.968,0,12.235,5.356,12.235,11.93C117.431,22.6,112.337,27.344,105.283,27.344ZM7.358,12.54a24.844,24.844,0,0,0-4.485.366V3.169c3.926-.113,8.816-.147,12.54.1V.653H0c.087,2,.174,4.615.218,7.576V29.39H6.1c7.359,0,10.842-3.483,10.842-9.057C16.938,15.065,13.149,12.54,7.358,12.54ZM5.7,26.952H3c-.075-2.325-.122-5.043-.122-7.925v-3.75a23.37,23.37,0,0,1,3.962-.343c4.441,0,7.315,1.611,7.315,5.486C14.151,24.775,11.19,26.952,5.7,26.952ZM75.675.653H69.1c.087,2,.174,4.615.218,7.576V29.39h2.874c-.131-2.743-.218-6.4-.218-10.363V17.676a18.777,18.777,0,0,0,2.264.133c7.75,0,11.887-3.832,11.887-9.4S81.248.653,75.675.653Zm-.74,14.673a21.854,21.854,0,0,1-2.961-.222V2.961h2.917c6.1,0,8.316,2.308,8.316,5.7C83.208,13.411,79.419,15.327,74.935,15.327ZM48.679.044c-8.893,0-15.021,5.762-15.662,13.716H25.472V.653H22.6c.087,2,.174,4.615.218,7.576V29.39h2.874c-.131-2.743-.218-6.4-.218-10.363V16.11h7.515C33.419,24.384,39.453,30,47.547,30c9.971,0,15.5-7.4,15.5-15.806A14.117,14.117,0,0,0,48.679.044Zm-.784,27.3c-7.141,0-11.93-4.833-11.93-12.192,0-7.663,4.964-12.5,11.843-12.5,7.968,0,12.235,5.356,12.235,11.93C60.044,22.6,54.949,27.344,47.9,27.344Zm91.916-12.322-7.446,7.4c-3.353,3.353-4.79,4.877-7.228,7.576l-2.308-1.916c2.525-2.308,3.962-3.7,7.446-7.184l5.912-5.878-5.912-5.878c-3.483-3.483-4.964-4.92-7.489-7.228L125.094,0c2.438,2.7,3.919,4.267,7.271,7.62Z"></path></svg>
Есть родитель — элемент svg, у него есть атрибуты width, height. Есть один или несколько дочерних элементов path. Если мы захотим, то можем добавить атрибут style или class к любому элементу и использовать их точно так же, как в ХТМЛ. СВГ даже можно встроить прямо в ХТМЛ‑код.
Для манипуляций с узлами контуров существует большое количество специальных библиотек, например Snap.js, SVG.js. Но это уже отдельная большая тема.
Лайфхак
Если в Иллюстраторе выделить какой‑нибудь контур и скопировать его, то в буфер обмена попадёт исходный код контура в СВГ‑формате. Можно его вставить в пустой файл, сохранить с расширением .svg и он готов к использованию. Иногда такой способ быстрее, чем сохранять контуры через экспорт.
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.