x
 
Юрий Мазурский
10 октября 2019
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Что такое СВГ и как его использовать в ХТМЛ-вёрстке?


Фор­мат СВГ (англ. 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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Поделиться
Отправить

Комментарии

Роман Кузнецов
10 октября 2019

А можно сделать векторную анимацию в After Effects и выгрузить по сути многокадровый SVG. Тогда через специальную библиотеку можно обращаться к кадрам этой анимации, управлять её направлением и скоростью, и при этом она будет немного весить.


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Автотесты «на пальцах» Как следить за качеством кода? Часть третья: процессы 3 Принципы надёжной вёрстки 5 Автотесты «на пальцах»




Недавно всплыло

Хочу научиться сторителлингу 12 4 2 Как найти себе замену 1