() translation by (you can also view the original English article)
В этом руководстве мы разберем основы реализации некоторых иконок в формате SVG (* Scalable Vector Graphics – масштабируемая векторная графика; открытый стандарт на язык разметки масштабируемой векторной графики; основанный на XML формат отображения векторной графики в Web-страницах, одобренный W3C . Использование в Web-страницах векторной графики вместо растровой позволяет уменьшить размер файла, содержащего рисунок, выводить изображение одинаково вне зависимости от разрешения экрана, а также упростить создание анимированных изображений. Специально для мобильных устройств, которые не обладают значительными вычислительными мощностями, были разработаны два варианта стандарта: SVG Tiny (SVGT) и SVG Basic (SVGB)), как предоставить запасной вариант и как их преобразовать в спрайт (* легко перемещаемый по экрану графический элемент (например, пуля или ракета), часто реализуемый с помощью аппаратных средств. Спрайты широко используются в анимации) в формате SVG.
Основы реализации иконок в формате SVG
Для достижения целей нашего руководства я буду использовать единственную страницу, которая будет служить чем-то вроде онлайн-визитки. В ней будут представлены краткие сведения обо мне и три профиля в сети, которые имеют отношение к моей работе.
На скриншоте выше вы видите, что я использую иконки (для Twitter, Dribbble и GitHub), чтобы предоставить ссылки на мои профили в сети. Я скачал эти иконки с сайта flaticon, который предоставляет широкий выбор иконок и символов как в векторном, так и в растровом форматах.
PNG и SVG
Мы начнем с использования версии этих иконок в формате PNG для обеспечения обратной совместимости, затем мы подготовим версию в формате SVG для браузеров с поддержкой этой технологии.
Я воспользовался Sketch (* редактор векторной графики для macOS) для вывода моих иконок в формате PNG, так что я воспользуюсь им снова для приготовления моих иконок к использованию в формате SVG.
Если посмотрите на скриншот выше, то заметите, что я дал всем моим группам и очертаниям в панели слева соответствующие имена (Adobe Illustrator отображает информацию подобным образом в панели со Слоями). Корректное наименование ваших ресурсов важно не только для облегчения поддержания порядка, но и для достижения цели, с которой мы будем использовать их позже в этом руководстве.
Экспортирование изображений в формате SVG
Теперь экспортируем иконки в формате SVG, что легко выполняется при помощи инструмента Sketch для вырезания слоев. За подробностями о том, как это работает, обращайтесь к Understanding Sketch’s Export Options. Я буду экспортировать их в качестве отдельных файлов и помещать в папку images моего проекта.
Обычно, для того чтобы отобразить изображение на вашем сайте, вы бы добавили ссылку на ресурс при помощи элемента с атрибутом src или каким-то подобным образом:
1 |
<img src="path-to-my-image.png" alt="" /> |
Однако в случае с SVG имеется множество различных способов добавления их в HTML-документ. Например, мы можем встроить в документ собственно код SVG; ниже показан, как мог бы выглядеть подобный код:
1 |
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
2 |
<svg width="50px" height="41px" viewBox="0 0 50 41" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"> |
3 |
<!-- Generator: Sketch 3.1 (8751) - http://www.bohemiancoding.com/sketch -->
|
4 |
<title>twitter-icon</title> |
5 |
<desc>Created with Sketch.</desc> |
6 |
<defs></defs>
|
7 |
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"> |
8 |
<g id="twitter-icon" sketch:type="MSLayerGroup" fill="#55ACEE"> |
9 |
<path d="M0,36.3461306 C0.803663004,36.4417973 1.62142857,36.4907387 2.45054945,36.4907387 C7.26336996,36.4907387 11.6928571,34.8346712 15.2086081,32.0564595 C10.71337,31.9727973 6.91959707,28.9779505 5.61245421,24.8624369 C6.23956044,24.9834054 6.88315018,25.0482297 7.54505495,25.0482297 C8.48205128,25.0482297 9.38956044,24.9217207 10.2516484,24.684955 C5.55201465,23.7334595 2.01117216,19.5466577 2.01117216,14.5276667 C2.01117216,14.4840811 2.01117216,14.4406802 2.01190476,14.397464 C3.3970696,15.1733243 4.98095238,15.6392838 6.66501832,15.693027 C3.90860806,13.8354685 2.09487179,10.6648018 2.09487179,7.07102252 C2.09487179,5.17264865 2.6014652,3.39321171 3.48571429,1.86328378 C8.55238095,8.13037387 16.1217949,12.2543829 24.6595238,12.6863604 C24.4844322,11.9282297 24.3934066,11.1375946 24.3934066,10.3257207 C24.3934066,4.60511261 28.9930403,-0.0328738739 34.6664835,-0.0328738739 C37.6210623,-0.0328738739 40.2908425,1.2251982 42.1648352,3.23844595 C44.5047619,2.77377928 46.7032967,1.91167117 48.6880952,0.724702703 C47.9210623,3.14351802 46.2923077,5.17357207 44.1712454,6.45565315 C46.2492674,6.20522072 48.2291209,5.6483964 50.0714286,4.82451802 C48.6941392,6.90185135 46.952381,8.72635135 44.9454212,10.1868378 C44.9652015,10.6310045 44.9750916,11.0777568 44.9750916,11.5269099 C44.9750916,25.2155541 34.6424908,41 15.7472527,41 C9.9459707,41 4.54615385,39.2852027 0,36.3461306 L0,36.3461306 Z" id="bird" sketch:type="MSShapeGroup"></path> |
10 |
</g>
|
11 |
</g>
|
12 |
</svg>
|
Это код одной из экспортированных мною ранее иконок в формате XML. Этот код очень подобен HTML-коду (это структурный формат), из-за чего мы можем добавить его прямо в документ.
Добавление иконок в формате SVG в документ HTML
Давайте начнем с базовой разметки HTML-страницы, включающей иконки в формат PNG вместе с их соответствующими якорными элементами и контейнер:
1 |
<div class="section"> |
2 |
<a href="http://twitter.com/DavidDarnes" title="Twitter profile"> |
3 |
<img alt="Twitter" width="50" height="51" src="img/twitter-icon.png"> |
4 |
</a>
|
5 |
<a href="http://dribbble.com/DavidDarnes" title="Dribbble profile"> |
6 |
<img alt="Dribbble" width="50" height="51" src="img/dribbble-icon.png"> |
7 |
</a>
|
8 |
<a href="http://github.com/DavidDarnes" title="GitHub profile"> |
9 |
<img alt="GitHub" width="50" height="51" src="img/github-icon.png"> |
10 |
</a>
|
11 |
</div>
|
Теперь я скопирую код SVG, однако я пропущу первую строку, в которой указываются тип кодирования набора символов и данные других атрибутов файла. В документе HTML уже содержится эта информация, так что нет необходимости повторяться.
1 |
<div class="section"> |
2 |
<a href="http://twitter.com/DavidDarnes" title="Twitter profile"> |
3 |
<svg width="50px" height="41px" viewBox="0 0 50 41" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"> |
4 |
<!-- Generator: Sketch 3.1 (8751) - http://www.bohemiancoding.com/sketch -->
|
5 |
<title>twitter-icon</title> |
6 |
<desc>Created with Sketch.</desc> |
7 |
<defs></defs>
|
8 |
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"> |
9 |
<g id="twitter-icon" sketch:type="MSLayerGroup" fill="#55ACEE"> |
10 |
<path d="M0,36.3461306 C0.803663004,36.4417973 1.62142857,36.4907387 2.45054945,36.4907387 C7.26336996,36.4907387 11.6928571,34.8346712 15.2086081,32.0564595 C10.71337,31.9727973 6.91959707,28.9779505 5.61245421,24.8624369 C6.23956044,24.9834054 6.88315018,25.0482297 7.54505495,25.0482297 C8.48205128,25.0482297 9.38956044,24.9217207 10.2516484,24.684955 C5.55201465,23.7334595 2.01117216,19.5466577 2.01117216,14.5276667 C2.01117216,14.4840811 2.01117216,14.4406802 2.01190476,14.397464 C3.3970696,15.1733243 4.98095238,15.6392838 6.66501832,15.693027 C3.90860806,13.8354685 2.09487179,10.6648018 2.09487179,7.07102252 C2.09487179,5.17264865 2.6014652,3.39321171 3.48571429,1.86328378 C8.55238095,8.13037387 16.1217949,12.2543829 24.6595238,12.6863604 C24.4844322,11.9282297 24.3934066,11.1375946 24.3934066,10.3257207 C24.3934066,4.60511261 28.9930403,-0.0328738739 34.6664835,-0.0328738739 C37.6210623,-0.0328738739 40.2908425,1.2251982 42.1648352,3.23844595 C44.5047619,2.77377928 46.7032967,1.91167117 48.6880952,0.724702703 C47.9210623,3.14351802 46.2923077,5.17357207 44.1712454,6.45565315 C46.2492674,6.20522072 48.2291209,5.6483964 50.0714286,4.82451802 C48.6941392,6.90185135 46.952381,8.72635135 44.9454212,10.1868378 C44.9652015,10.6310045 44.9750916,11.0777568 44.9750916,11.5269099 C44.9750916,25.2155541 34.6424908,41 15.7472527,41 C9.9459707,41 4.54615385,39.2852027 0,36.3461306 L0,36.3461306 Z" id="bird" sketch:type="MSShapeGroup"></path> |
11 |
</g>
|
12 |
</g>
|
13 |
</svg>
|
14 |
<img alt="Twitter" width="50" height="51" src="img/twitter-icon.png"> |
15 |
</a>
|
16 |
<a href="http://dribbble.com/DavidDarnes" title="Dribbble profile"> |
17 |
<img alt="Dribbble" width="50" height="51" src="img/dribbble-icon.png"> |
18 |
</a>
|
19 |
<a href="http://github.com/DavidDarnes" title="GitHub profile"> |
20 |
<img alt="GitHub" width="50" height="51" src="img/github-icon.png"> |
21 |
</a>
|
22 |
</div>
|
Мы добавили код SVG прямо над соответствующей иконкой в формате PNG документа HTML. Я закомментирую на некоторое время строку с обычным изображением в формате PNG, чтобы оно не отображалось после версии изображения в формате SVG.
Очищенный код SVG
Также я собираюсь очистить код изображения в формате SVG. Удалять следующие элементы и атрибуты необязательно, поскольку в результате удаления мною большинства элементов код SVG останется работоспособным. Ниже приводится код до и после внесения изменений, если вы хотите проделать то же самое с вашими изображениями:
1 |
<svg width="50px" height="41px" viewBox="0 0 50 41" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"> |
2 |
<!-- Generator: Sketch 3.1 (8751) - http://www.bohemiancoding.com/sketch -->
|
3 |
<title>twitter-icon</title> |
4 |
<desc>Created with Sketch.</desc> |
5 |
<defs></defs>
|
6 |
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"> |
7 |
<g id="twitter-icon" sketch:type="MSLayerGroup" fill="#55ACEE"> |
8 |
<path d="M0,36.3461306 C0.803663004,36.4417973 1.62142857,36.4907387 2.45054945,36.4907387 C7.26336996,36.4907387 11.6928571,34.8346712 15.2086081,32.0564595 C10.71337,31.9727973 6.91959707,28.9779505 5.61245421,24.8624369 C6.23956044,24.9834054 6.88315018,25.0482297 7.54505495,25.0482297 C8.48205128,25.0482297 9.38956044,24.9217207 10.2516484,24.684955 C5.55201465,23.7334595 2.01117216,19.5466577 2.01117216,14.5276667 C2.01117216,14.4840811 2.01117216,14.4406802 2.01190476,14.397464 C3.3970696,15.1733243 4.98095238,15.6392838 6.66501832,15.693027 C3.90860806,13.8354685 2.09487179,10.6648018 2.09487179,7.07102252 C2.09487179,5.17264865 2.6014652,3.39321171 3.48571429,1.86328378 C8.55238095,8.13037387 16.1217949,12.2543829 24.6595238,12.6863604 C24.4844322,11.9282297 24.3934066,11.1375946 24.3934066,10.3257207 C24.3934066,4.60511261 28.9930403,-0.0328738739 34.6664835,-0.0328738739 C37.6210623,-0.0328738739 40.2908425,1.2251982 42.1648352,3.23844595 C44.5047619,2.77377928 46.7032967,1.91167117 48.6880952,0.724702703 C47.9210623,3.14351802 46.2923077,5.17357207 44.1712454,6.45565315 C46.2492674,6.20522072 48.2291209,5.6483964 50.0714286,4.82451802 C48.6941392,6.90185135 46.952381,8.72635135 44.9454212,10.1868378 C44.9652015,10.6310045 44.9750916,11.0777568 44.9750916,11.5269099 C44.9750916,25.2155541 34.6424908,41 15.7472527,41 C9.9459707,41 4.54615385,39.2852027 0,36.3461306 L0,36.3461306 Z" id="bird" sketch:type="MSShapeGroup"></path> |
9 |
</g>
|
10 |
</g>
|
11 |
</svg>
|
1 |
<svg width="50px" height="41px" viewBox="0 0 50 41" version="1.1" xmlns="http://www.w3.org/2000/svg"> |
2 |
<g id="twitter-icon" fill="#55ACEE"> |
3 |
<path d="M0,36.3461306 C0.803663004,36.4417973 1.62142857,36.4907387 2.45054945,36.4907387 C7.26336996,36.4907387 11.6928571,34.8346712 15.2086081,32.0564595 C10.71337,31.9727973 6.91959707,28.9779505 5.61245421,24.8624369 C6.23956044,24.9834054 6.88315018,25.0482297 7.54505495,25.0482297 C8.48205128,25.0482297 9.38956044,24.9217207 10.2516484,24.684955 C5.55201465,23.7334595 2.01117216,19.5466577 2.01117216,14.5276667 C2.01117216,14.4840811 2.01117216,14.4406802 2.01190476,14.397464 C3.3970696,15.1733243 4.98095238,15.6392838 6.66501832,15.693027 C3.90860806,13.8354685 2.09487179,10.6648018 2.09487179,7.07102252 C2.09487179,5.17264865 2.6014652,3.39321171 3.48571429,1.86328378 C8.55238095,8.13037387 16.1217949,12.2543829 24.6595238,12.6863604 C24.4844322,11.9282297 24.3934066,11.1375946 24.3934066,10.3257207 C24.3934066,4.60511261 28.9930403,-0.0328738739 34.6664835,-0.0328738739 C37.6210623,-0.0328738739 40.2908425,1.2251982 42.1648352,3.23844595 C44.5047619,2.77377928 46.7032967,1.91167117 48.6880952,0.724702703 C47.9210623,3.14351802 46.2923077,5.17357207 44.1712454,6.45565315 C46.2492674,6.20522072 48.2291209,5.6483964 50.0714286,4.82451802 C48.6941392,6.90185135 46.952381,8.72635135 44.9454212,10.1868378 C44.9652015,10.6310045 44.9750916,11.0777568 44.9750916,11.5269099 C44.9750916,25.2155541 34.6424908,41 15.7472527,41 C9.9459707,41 4.54615385,39.2852027 0,36.3461306 L0,36.3461306 Z" id="bird"></path> |
4 |
</g>
|
5 |
</svg>
|
Обратите внимание на элементы, которые я удалил. Сейчас элементы , <desc> и <defs> нам не нужны, однако возможно, что они нам пригодятся позже в этом руководстве. Также имеется пара элементов , которые используются для указания групп и соответствуют группам, созданным в моем документе Sketch. По умолчанию Sketch помещает все внутри страницы, поэтому у нас имеется элемент Вы можете удалить этот элемент, поскольку он нам не нужен (группа, расположенная внутри него, более важна для нас). Sketch действительно предоставляет опцию для получения очищенного кода SVG при экспортировании, однако нет ничего плохого, если мы очищаем его самостоятельно.
Последнее, что нужно выполнить на данном этапе, – удалить атрибуты height и width в самом элементе SVG. Этот момент необходимо будет скомпенсировать в моем файле CSS, как показано ниже:
1 |
<svg viewBox="0 0 50 41" version="1.1" xmlns="http://www.w3.org/2000/svg"> |
2 |
<g id="twitter-icon" fill="#55ACEE"> |
3 |
<path d="M0,36.3461306 C0.803663004,36.4417973 1.62142857,36.4907387 2.45054945,36.4907387 C7.26336996,36.4907387 11.6928571,34.8346712 15.2086081,32.0564595 C10.71337,31.9727973 6.91959707,28.9779505 5.61245421,24.8624369 C6.23956044,24.9834054 6.88315018,25.0482297 7.54505495,25.0482297 C8.48205128,25.0482297 9.38956044,24.9217207 10.2516484,24.684955 C5.55201465,23.7334595 2.01117216,19.5466577 2.01117216,14.5276667 C2.01117216,14.4840811 2.01117216,14.4406802 2.01190476,14.397464 C3.3970696,15.1733243 4.98095238,15.6392838 6.66501832,15.693027 C3.90860806,13.8354685 2.09487179,10.6648018 2.09487179,7.07102252 C2.09487179,5.17264865 2.6014652,3.39321171 3.48571429,1.86328378 C8.55238095,8.13037387 16.1217949,12.2543829 24.6595238,12.6863604 C24.4844322,11.9282297 24.3934066,11.1375946 24.3934066,10.3257207 C24.3934066,4.60511261 28.9930403,-0.0328738739 34.6664835,-0.0328738739 C37.6210623,-0.0328738739 40.2908425,1.2251982 42.1648352,3.23844595 C44.5047619,2.77377928 46.7032967,1.91167117 48.6880952,0.724702703 C47.9210623,3.14351802 46.2923077,5.17357207 44.1712454,6.45565315 C46.2492674,6.20522072 48.2291209,5.6483964 50.0714286,4.82451802 C48.6941392,6.90185135 46.952381,8.72635135 44.9454212,10.1868378 C44.9652015,10.6310045 44.9750916,11.0777568 44.9750916,11.5269099 C44.9750916,25.2155541 34.6424908,41 15.7472527,41 C9.9459707,41 4.54615385,39.2852027 0,36.3461306 L0,36.3461306 Z" id="bird"></path> |
4 |
</g>
|
5 |
</svg>
|
1 |
.icon { |
2 |
max-width: 40px; |
3 |
max-height: 40px; |
4 |
transition: .2s; |
5 |
-webkit-filter: drop-shadow(0 1px 0 #11222d); |
6 |
}
|
Если вы последовали описанным здесь шагам, то вы должны будете увидеть в своем браузере отчетливую векторную версию ваших изображений.
Совет: Удостоверьтесь, что изображение действительно является изображением в формате SVG, увеличивая его масштаб при помощи комбинации клавиш Command-+ при просмотре его в браузере. Изображение должно оставаться отчетливым, независимо от того, насколько вы его увеличили.
Предоставление запасного варианта
Если вы используете код SVG для выполнения на клиентской стороне, то вас, возможно, интересует, как обстоят дела с поддержкой браузерами этой технологии. Встроенные изображения в формате SVG отображаются корректно во всех браузерах за исключением Internet Explorer 8 (и более ранних версий) и Opera Mini. Сервис Can I Use в данный момент (* октябрь 2014 на момент опубликования оригинального руководства) сообщает, что IE8 используют около 4% всех пользователей, а Opera Mini – около 3%. Так что в вашем случае, возможно, и нет необходимости в предоставлении запасного варианта, однако я покажу вам решение.
1 |
<a href="http://twitter.com/DavidDarnes" title="twitter profile"> |
2 |
<svg viewBox="0 0 50 41" version="1.1" xmlns="http://www.w3.org/2000/svg"> |
3 |
<g id="twitter-icon" fill="#55ACEE"> |
4 |
<path d="M0,36.3461306 C0.803663004,36.4417973 1.62142857,36.4907387 2.45054945,36.4907387 C7.26336996,36.4907387 11.6928571,34.8346712 15.2086081,32.0564595 C10.71337,31.9727973 6.91959707,28.9779505 5.61245421,24.8624369 C6.23956044,24.9834054 6.88315018,25.0482297 7.54505495,25.0482297 C8.48205128,25.0482297 9.38956044,24.9217207 10.2516484,24.684955 C5.55201465,23.7334595 2.01117216,19.5466577 2.01117216,14.5276667 C2.01117216,14.4840811 2.01117216,14.4406802 2.01190476,14.397464 C3.3970696,15.1733243 4.98095238,15.6392838 6.66501832,15.693027 C3.90860806,13.8354685 2.09487179,10.6648018 2.09487179,7.07102252 C2.09487179,5.17264865 2.6014652,3.39321171 3.48571429,1.86328378 C8.55238095,8.13037387 16.1217949,12.2543829 24.6595238,12.6863604 C24.4844322,11.9282297 24.3934066,11.1375946 24.3934066,10.3257207 C24.3934066,4.60511261 28.9930403,-0.0328738739 34.6664835,-0.0328738739 C37.6210623,-0.0328738739 40.2908425,1.2251982 42.1648352,3.23844595 C44.5047619,2.77377928 46.7032967,1.91167117 48.6880952,0.724702703 C47.9210623,3.14351802 46.2923077,5.17357207 44.1712454,6.45565315 C46.2492674,6.20522072 48.2291209,5.6483964 50.0714286,4.82451802 C48.6941392,6.90185135 46.952381,8.72635135 44.9454212,10.1868378 C44.9652015,10.6310045 44.9750916,11.0777568 44.9750916,11.5269099 C44.9750916,25.2155541 34.6424908,41 15.7472527,41 C9.9459707,41 4.54615385,39.2852027 0,36.3461306 L0,36.3461306 Z" id="bird"></path> |
5 |
</g>
|
6 |
</svg>
|
7 |
<!-- <img alt="twitter" width="50" height="51" src="img/twitter-icon.png"> -->
|
8 |
</a>
|
Взгляните на код для одной из моих иконок в формате SVG в документе, и вы заметите, что моя изначальная иконка в формат PNG по-прежнему находится на своем месте, однако закомментирована. Это изображение в формате PNG будет нашим запасным вариантом.
Удаление комментариев
Для начала я удалю комментарии. Нам теперь необходимо переместить элемент img> вверх в сам элемент svg>, сразу после группы, содержащей собственно иконку.
Далее я оберну в характерный для языка SVG элемент под названием foreignObject. Если браузер не может интерпретировать векторную информацию SVG, то он обратится вместо этого к «нехарактерному объекту» и перейдет к использованию расположенного в нем элемента . Также мы должны дать знать браузеру о том, что он должен сделать выбор в пользу векторной версии изображения, если он ее поддерживает. Именно для этого и необходим элемент , в который я поместил и группу, и foreignObject.
Ниже приводится обновленная разметка:
1 |
<a href="http://twitter.com/DavidDarnes" title="twitter profile"> |
2 |
<svg viewBox="0 0 50 41" version="1.1" xmlns="http://www.w3.org/2000/svg"> |
3 |
<switch>
|
4 |
<g id="twitter-icon" fill="#55ACEE"> |
5 |
<path d="M0,36.3461306 C0.803663004,36.4417973 1.62142857,36.4907387 2.45054945,36.4907387 C7.26336996,36.4907387 11.6928571,34.8346712 15.2086081,32.0564595 C10.71337,31.9727973 6.91959707,28.9779505 5.61245421,24.8624369 C6.23956044,24.9834054 6.88315018,25.0482297 7.54505495,25.0482297 C8.48205128,25.0482297 9.38956044,24.9217207 10.2516484,24.684955 C5.55201465,23.7334595 2.01117216,19.5466577 2.01117216,14.5276667 C2.01117216,14.4840811 2.01117216,14.4406802 2.01190476,14.397464 C3.3970696,15.1733243 4.98095238,15.6392838 6.66501832,15.693027 C3.90860806,13.8354685 2.09487179,10.6648018 2.09487179,7.07102252 C2.09487179,5.17264865 2.6014652,3.39321171 3.48571429,1.86328378 C8.55238095,8.13037387 16.1217949,12.2543829 24.6595238,12.6863604 C24.4844322,11.9282297 24.3934066,11.1375946 24.3934066,10.3257207 C24.3934066,4.60511261 28.9930403,-0.0328738739 34.6664835,-0.0328738739 C37.6210623,-0.0328738739 40.2908425,1.2251982 42.1648352,3.23844595 C44.5047619,2.77377928 46.7032967,1.91167117 48.6880952,0.724702703 C47.9210623,3.14351802 46.2923077,5.17357207 44.1712454,6.45565315 C46.2492674,6.20522072 48.2291209,5.6483964 50.0714286,4.82451802 C48.6941392,6.90185135 46.952381,8.72635135 44.9454212,10.1868378 C44.9652015,10.6310045 44.9750916,11.0777568 44.9750916,11.5269099 C44.9750916,25.2155541 34.6424908,41 15.7472527,41 C9.9459707,41 4.54615385,39.2852027 0,36.3461306 L0,36.3461306 Z" id="bird"></path> |
6 |
</g>
|
7 |
<foreignObject>
|
8 |
<img alt="twitter" width="50" height="51" src="img/twitter-icon.png"> |
9 |
</foreignObject>
|
10 |
</switch>
|
11 |
</svg>
|
12 |
</a>
|
Если вы проделали то же, что и я, и получили такую же разметку HTML, то в случае, если браузер не поддерживает SVG, в качестве изображения должно использоваться изначально добавленное растровое изображение, .
Создание спрайта в формате SVG
Спрайты SVG работают подобно традиционным спрайтам. Простейший вариант спрайта – коллекция графических элементов, скомбинированных в одно изображение. Далее каждое изображение выбирается при помощи CSS и HTML, обычно за счет указания координат и «окна» просмотра.
Тремя основными преимуществами при этом являются сокращение времени загрузки страницы, облегчение работы с кодом и соответствие между графическими элементами на странице (* при возникновении необходимости изменить изображение его необходимо будет изменить только в одном месте кода, а значит снижается вероятность совершения ошибок). Второй и третий моменты очень даже справедливы в случае использования спрайтов SVG. Вместо нескольких блоков кода SVG, разбросанного по всей странице, у нас бы имелось только одно место для обновления изображений в формате SVG.
Для начала я добавлю новый элемент svg> внутри элемента head> на моей странице, сразу перед закрывающим тегом. В этом элементе svg> будут содержаться все добавленные мною ранее на странице иконки.
1 |
<!doctype html>
|
2 |
<html lang="en"> |
3 |
<head>
|
4 |
<meta charset="utf-8" /> |
5 |
<title>David Darnes - Web Designer & Front-end Developer</title> |
6 |
<link rel="stylesheet" type="text/css" href="style.css" /> |
7 |
<!--[if IE]>
|
8 |
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
9 |
<![endif]-->
|
10 |
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> |
11 |
|
12 |
</svg>
|
13 |
</head>
|
Далее мне нужно переместить мои иконки в него. Мне не нужно перемещать весь элемент <svg>, а только элемент для добавления группы и его содержимое. Я могу собрать иконки в элементе <svg> в заголовке.
1 |
<!doctype html>
|
2 |
<html lang="en"> |
3 |
<head>
|
4 |
<meta charset="utf-8" /> |
5 |
<title>David Darnes - Web Designer & Front-end Developer</title> |
6 |
<link rel="stylesheet" type="text/css" href="style.css" /> |
7 |
<!--[if IE]>
|
8 |
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
9 |
<![endif]-->
|
10 |
<svg display="none" version="1.1" xmlns="http://www.w3.org/2000/svg"> |
11 |
<g id="twitter-icon" fill="#55ACEE"> |
12 |
<path d="M0,36.3461306 C0.803663004,36.4417973 1.62142857,36.4907387 2.45054945,36.4907387 C7.26336996,36.4907387 11.6928571,34.8346712 15.2086081,32.0564595 C10.71337,31.9727973 6.91959707,28.9779505 5.61245421,24.8624369 C6.23956044,24.9834054 6.88315018,25.0482297 7.54505495,25.0482297 C8.48205128,25.0482297 9.38956044,24.9217207 10.2516484,24.684955 C5.55201465,23.7334595 2.01117216,19.5466577 2.01117216,14.5276667 C2.01117216,14.4840811 2.01117216,14.4406802 2.01190476,14.397464 C3.3970696,15.1733243 4.98095238,15.6392838 6.66501832,15.693027 C3.90860806,13.8354685 2.09487179,10.6648018 2.09487179,7.07102252 C2.09487179,5.17264865 2.6014652,3.39321171 3.48571429,1.86328378 C8.55238095,8.13037387 16.1217949,12.2543829 24.6595238,12.6863604 C24.4844322,11.9282297 24.3934066,11.1375946 24.3934066,10.3257207 C24.3934066,4.60511261 28.9930403,-0.0328738739 34.6664835,-0.0328738739 C37.6210623,-0.0328738739 40.2908425,1.2251982 42.1648352,3.23844595 C44.5047619,2.77377928 46.7032967,1.91167117 48.6880952,0.724702703 C47.9210623,3.14351802 46.2923077,5.17357207 44.1712454,6.45565315 C46.2492674,6.20522072 48.2291209,5.6483964 50.0714286,4.82451802 C48.6941392,6.90185135 46.952381,8.72635135 44.9454212,10.1868378 C44.9652015,10.6310045 44.9750916,11.0777568 44.9750916,11.5269099 C44.9750916,25.2155541 34.6424908,41 15.7472527,41 C9.9459707,41 4.54615385,39.2852027 0,36.3461306 L0,36.3461306 Z" id="bird"></path> |
13 |
</g>
|
14 |
<g id="dribbble-icon"> |
15 |
<path d="M25.0002551,0 C11.1927551,0 0.000255102041,11.1925 0.000255102041,25 C0.000255102041,38.8075 11.1927551,50 25.0002551,50 C38.8077551,50 50.0002551,38.8075 50.0002551,25 C50.0002551,11.1925 38.8077551,0 25.0002551,0 L25.0002551,0 L25.0002551,0 Z" id="ball" fill="#EA4C89"></path> |
16 |
<path d="M25.0002551,-0.000510204082 C11.1927551,-0.000510204082 0.000255102041,11.1919898 0.000255102041,24.9994898 C0.000255102041,38.8069898 11.1927551,49.9994898 25.0002551,49.9994898 C38.8077551,49.9994898 50.0002551,38.8069898 50.0002551,24.9994898 C50.0002551,11.1919898 38.8077551,-0.000510204082 25.0002551,-0.000510204082 L25.0002551,-0.000510204082 L25.0002551,-0.000510204082 Z M25.0002551,3.6219898 C30.4465051,3.6219898 35.4177551,5.6594898 39.1927551,9.0119898 C36.4190051,12.6707398 32.2052551,15.1069898 27.9827551,16.7557398 C25.6815051,12.5457398 22.8477551,8.1069898 19.9640051,4.2182398 C21.5777551,3.8282398 23.2640051,3.6219898 25.0002551,3.6219898 L25.0002551,3.6219898 L25.0002551,3.6219898 Z M15.9052551,5.6482398 C18.6915051,9.8169898 21.3915051,13.6832398 23.8590051,18.0594898 C17.6202551,19.6757398 10.5727551,20.6457398 4.0615051,20.6619898 C5.4340051,14.0019898 9.9077551,8.4719898 15.9052551,5.6482398 L15.9052551,5.6482398 L15.9052551,5.6482398 Z M41.5640051,11.4844898 C44.5465051,15.1332398 46.3427551,19.7869898 46.3777551,24.8582398 C41.4327551,23.8844898 36.5140051,23.6282398 31.5077551,24.1332398 C30.9440051,22.7294898 30.2627551,21.3969898 29.6090051,19.9582398 C33.9252551,18.2169898 38.5402551,15.2369898 41.5640051,11.4844898 L41.5640051,11.4844898 L41.5640051,11.4844898 Z M25.5952551,21.3669898 C26.1302551,22.5057398 26.7502551,23.7119898 27.3315051,24.9457398 C20.3690051,28.0157398 12.9640051,32.1182398 9.1190051,39.3107398 C5.7027551,35.5219898 3.6227551,30.5019898 3.6227551,24.9994898 C3.6227551,24.7907398 3.6265051,24.5819898 3.6327551,24.3744898 C11.0890051,24.3382398 18.4077551,23.4057398 25.5952551,21.3669898 L25.5952551,21.3669898 L25.5952551,21.3669898 Z M36.8915051,27.1957398 C39.9990051,27.1857398 43.2102551,27.6194898 46.1115051,28.3832398 C45.1627551,34.3532398 41.7402551,39.5019898 36.9277551,42.7419898 C35.7802551,37.5232398 34.6865051,32.5294898 32.7527551,27.4944898 C34.0865051,27.2957398 35.4790051,27.1994898 36.8915051,27.1957398 L36.8915051,27.1957398 L36.8915051,27.1957398 Z M28.7965051,28.4719898 C30.7677551,33.5619898 32.3140051,39.1994898 33.3515051,44.6857398 C30.7852551,45.7757398 27.9640051,46.3782398 25.0002551,46.3782398 C20.0565051,46.3782398 15.5040051,44.6982398 11.8827551,41.8794898 C15.7540051,35.5982398 21.7502551,30.8457398 28.7965051,28.4719898 L28.7965051,28.4719898 L28.7965051,28.4719898 Z" id="ball-lines" fill="#C32361"></path> |
17 |
</g>
|
18 |
<g id="github-icon" fill="#161614"> |
19 |
<path d="M0,25.633467 C0,36.9584555 7.1625894,46.5651047 17.0969029,49.954576 C18.3477086,50.1906116 18.8035237,49.3991056 18.8035237,48.719323 C18.8035237,48.1119247 18.7820375,46.4990147 18.7697597,44.3605321 C11.8158937,45.9089257 10.3486909,40.9238537 10.3486909,40.9238537 C9.21145523,37.9623936 7.57236256,37.1740347 7.57236256,37.1740347 C5.30249547,35.5847282 7.74425243,35.6161996 7.74425243,35.6161996 C10.2535376,35.7971603 11.5734062,38.2582249 11.5734062,38.2582249 C13.8033703,42.1748424 17.4253353,41.0434451 18.8495657,40.3872661 C19.0767059,38.7318697 19.7228276,37.6020459 20.4364775,36.9616026 C14.8853556,36.314865 9.04877375,34.1150132 9.04877375,24.2927848 C9.04877375,21.494976 10.0233279,19.2054306 11.6225176,17.4147071 C11.3646828,16.766396 10.5067682,14.1589893 11.8680745,10.6310438 C11.8680745,10.6310438 13.9660518,9.9418198 18.7421345,13.2589069 C20.73575,12.6892743 22.875165,12.4060315 25.0007674,12.3950166 C27.124835,12.4060315 29.2627152,12.6892743 31.2594002,13.2589069 C36.0324135,9.9418198 38.1273213,10.6310438 38.1273213,10.6310438 C39.4916971,14.1589893 38.6337825,16.766396 38.3774824,17.4147071 C39.9797416,19.2054306 40.9466221,21.494976 40.9466221,24.2927848 C40.9466221,34.1401903 35.1008318,36.3069972 29.5328279,36.9411462 C30.4291108,37.7326523 31.2287056,39.2967816 31.2287056,41.688609 C31.2287056,45.1142725 31.198011,47.8790363 31.198011,48.719323 C31.198011,49.4053999 31.6492219,50.2032002 32.9169097,49.9530025 C42.8435495,46.5556633 50,36.9553083 50,25.633467 C50,11.4760513 38.8056724,0 24.9976979,0 C11.1943276,0 0,11.4760513 0,25.633467 Z" id="octocat"></path> |
20 |
</g>
|
21 |
</svg>
|
22 |
</head>
|
Обратите внимание: Если вы умеете работать с Grunt, то для вас имеется плагин, который автоматически объединит все ваши отдельные SVG-файлы.
Скрываем!
Теперь, когда у нас имеются все наши иконки в заголовке, нам нужно их скрыть; если мы добавим атрибут display=”none” к svg>, то все иконки не будут появляться вверху страницы.
Определение каждой иконки
На следующем этапе нам необходимо определить каждую иконку, благодаря чему мы сможем повторно использовать их на странице. Тут нам и пригождается элемент defs, который мы ранее удалили. За счет оборачивания всех групп, а значит и всех моих иконок, я могу указать браузеру, что хочу повторно воспользоваться ими в других местах страницы.
1 |
<!doctype html>
|
2 |
<html lang="en"> |
3 |
<head>
|
4 |
<meta charset="utf-8" /> |
5 |
<title>David Darnes - Web Designer & Front-end Developer</title> |
6 |
<link rel="stylesheet" type="text/css" href="style.css" /> |
7 |
<!--[if IE]>
|
8 |
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
9 |
<![endif]-->
|
10 |
<svg display="none" version="1.1" xmlns="http://www.w3.org/2000/svg"> |
11 |
<defs>
|
12 |
<g id="twitter-icon" fill="#55ACEE"> |
13 |
<path d="M0,36.3461306 C0.803663004,36.4417973 1.62142857,36.4907387 2.45054945,36.4907387 C7.26336996,36.4907387 11.6928571,34.8346712 15.2086081,32.0564595 C10.71337,31.9727973 6.91959707,28.9779505 5.61245421,24.8624369 C6.23956044,24.9834054 6.88315018,25.0482297 7.54505495,25.0482297 C8.48205128,25.0482297 9.38956044,24.9217207 10.2516484,24.684955 C5.55201465,23.7334595 2.01117216,19.5466577 2.01117216,14.5276667 C2.01117216,14.4840811 2.01117216,14.4406802 2.01190476,14.397464 C3.3970696,15.1733243 4.98095238,15.6392838 6.66501832,15.693027 C3.90860806,13.8354685 2.09487179,10.6648018 2.09487179,7.07102252 C2.09487179,5.17264865 2.6014652,3.39321171 3.48571429,1.86328378 C8.55238095,8.13037387 16.1217949,12.2543829 24.6595238,12.6863604 C24.4844322,11.9282297 24.3934066,11.1375946 24.3934066,10.3257207 C24.3934066,4.60511261 28.9930403,-0.0328738739 34.6664835,-0.0328738739 C37.6210623,-0.0328738739 40.2908425,1.2251982 42.1648352,3.23844595 C44.5047619,2.77377928 46.7032967,1.91167117 48.6880952,0.724702703 C47.9210623,3.14351802 46.2923077,5.17357207 44.1712454,6.45565315 C46.2492674,6.20522072 48.2291209,5.6483964 50.0714286,4.82451802 C48.6941392,6.90185135 46.952381,8.72635135 44.9454212,10.1868378 C44.9652015,10.6310045 44.9750916,11.0777568 44.9750916,11.5269099 C44.9750916,25.2155541 34.6424908,41 15.7472527,41 C9.9459707,41 4.54615385,39.2852027 0,36.3461306 L0,36.3461306 Z" id="bird"></path> |
14 |
</g>
|
15 |
<g id="dribbble-icon"> |
16 |
<path d="M25.0002551,0 C11.1927551,0 0.000255102041,11.1925 0.000255102041,25 C0.000255102041,38.8075 11.1927551,50 25.0002551,50 C38.8077551,50 50.0002551,38.8075 50.0002551,25 C50.0002551,11.1925 38.8077551,0 25.0002551,0 L25.0002551,0 L25.0002551,0 Z" id="ball" fill="#EA4C89"></path> |
17 |
<path d="M25.0002551,-0.000510204082 C11.1927551,-0.000510204082 0.000255102041,11.1919898 0.000255102041,24.9994898 C0.000255102041,38.8069898 11.1927551,49.9994898 25.0002551,49.9994898 C38.8077551,49.9994898 50.0002551,38.8069898 50.0002551,24.9994898 C50.0002551,11.1919898 38.8077551,-0.000510204082 25.0002551,-0.000510204082 L25.0002551,-0.000510204082 L25.0002551,-0.000510204082 Z M25.0002551,3.6219898 C30.4465051,3.6219898 35.4177551,5.6594898 39.1927551,9.0119898 C36.4190051,12.6707398 32.2052551,15.1069898 27.9827551,16.7557398 C25.6815051,12.5457398 22.8477551,8.1069898 19.9640051,4.2182398 C21.5777551,3.8282398 23.2640051,3.6219898 25.0002551,3.6219898 L25.0002551,3.6219898 L25.0002551,3.6219898 Z M15.9052551,5.6482398 C18.6915051,9.8169898 21.3915051,13.6832398 23.8590051,18.0594898 C17.6202551,19.6757398 10.5727551,20.6457398 4.0615051,20.6619898 C5.4340051,14.0019898 9.9077551,8.4719898 15.9052551,5.6482398 L15.9052551,5.6482398 L15.9052551,5.6482398 Z M41.5640051,11.4844898 C44.5465051,15.1332398 46.3427551,19.7869898 46.3777551,24.8582398 C41.4327551,23.8844898 36.5140051,23.6282398 31.5077551,24.1332398 C30.9440051,22.7294898 30.2627551,21.3969898 29.6090051,19.9582398 C33.9252551,18.2169898 38.5402551,15.2369898 41.5640051,11.4844898 L41.5640051,11.4844898 L41.5640051,11.4844898 Z M25.5952551,21.3669898 C26.1302551,22.5057398 26.7502551,23.7119898 27.3315051,24.9457398 C20.3690051,28.0157398 12.9640051,32.1182398 9.1190051,39.3107398 C5.7027551,35.5219898 3.6227551,30.5019898 3.6227551,24.9994898 C3.6227551,24.7907398 3.6265051,24.5819898 3.6327551,24.3744898 C11.0890051,24.3382398 18.4077551,23.4057398 25.5952551,21.3669898 L25.5952551,21.3669898 L25.5952551,21.3669898 Z M36.8915051,27.1957398 C39.9990051,27.1857398 43.2102551,27.6194898 46.1115051,28.3832398 C45.1627551,34.3532398 41.7402551,39.5019898 36.9277551,42.7419898 C35.7802551,37.5232398 34.6865051,32.5294898 32.7527551,27.4944898 C34.0865051,27.2957398 35.4790051,27.1994898 36.8915051,27.1957398 L36.8915051,27.1957398 L36.8915051,27.1957398 Z M28.7965051,28.4719898 C30.7677551,33.5619898 32.3140051,39.1994898 33.3515051,44.6857398 C30.7852551,45.7757398 27.9640051,46.3782398 25.0002551,46.3782398 C20.0565051,46.3782398 15.5040051,44.6982398 11.8827551,41.8794898 C15.7540051,35.5982398 21.7502551,30.8457398 28.7965051,28.4719898 L28.7965051,28.4719898 L28.7965051,28.4719898 Z" id="ball-lines" fill="#C32361"></path> |
18 |
</g>
|
19 |
<g id="github-icon" fill="#161614"> |
20 |
<path d="M0,25.633467 C0,36.9584555 7.1625894,46.5651047 17.0969029,49.954576 C18.3477086,50.1906116 18.8035237,49.3991056 18.8035237,48.719323 C18.8035237,48.1119247 18.7820375,46.4990147 18.7697597,44.3605321 C11.8158937,45.9089257 10.3486909,40.9238537 10.3486909,40.9238537 C9.21145523,37.9623936 7.57236256,37.1740347 7.57236256,37.1740347 C5.30249547,35.5847282 7.74425243,35.6161996 7.74425243,35.6161996 C10.2535376,35.7971603 11.5734062,38.2582249 11.5734062,38.2582249 C13.8033703,42.1748424 17.4253353,41.0434451 18.8495657,40.3872661 C19.0767059,38.7318697 19.7228276,37.6020459 20.4364775,36.9616026 C14.8853556,36.314865 9.04877375,34.1150132 9.04877375,24.2927848 C9.04877375,21.494976 10.0233279,19.2054306 11.6225176,17.4147071 C11.3646828,16.766396 10.5067682,14.1589893 11.8680745,10.6310438 C11.8680745,10.6310438 13.9660518,9.9418198 18.7421345,13.2589069 C20.73575,12.6892743 22.875165,12.4060315 25.0007674,12.3950166 C27.124835,12.4060315 29.2627152,12.6892743 31.2594002,13.2589069 C36.0324135,9.9418198 38.1273213,10.6310438 38.1273213,10.6310438 C39.4916971,14.1589893 38.6337825,16.766396 38.3774824,17.4147071 C39.9797416,19.2054306 40.9466221,21.494976 40.9466221,24.2927848 C40.9466221,34.1401903 35.1008318,36.3069972 29.5328279,36.9411462 C30.4291108,37.7326523 31.2287056,39.2967816 31.2287056,41.688609 C31.2287056,45.1142725 31.198011,47.8790363 31.198011,48.719323 C31.198011,49.4053999 31.6492219,50.2032002 32.9169097,49.9530025 C42.8435495,46.5556633 50,36.9553083 50,25.633467 C50,11.4760513 38.8056724,0 24.9976979,0 C11.1943276,0 0,11.4760513 0,25.633467 Z" id="octocat"></path> |
21 |
</g>
|
22 |
</defs>
|
23 |
</svg>
|
24 |
</head>
|
Использование иконок
Теперь иконки определены, однако нам необходим метод для их использования, для чего и нужен элемент use. Благодаря элементу мы можем выбрать какой-либо элемент из элемента и добавить его в любом месте страницы. Мы выбираем элемент при помощи его ID, почему нам и важно было дать имена нашим иконкам в изначальном документе Sketch.
Обратите внимание на использованные в примере выше ID и затем взгляните, как я использую их при помощи элемента use, например так: use xlink:href="#twitter-icon">/use>.
1 |
<div class="section"> |
2 |
<a href="http://twitter.com/DavidDarnes" title="Twitter profile"> |
3 |
<svg class="icon" viewBox="0 0 50 41"> |
4 |
<switch>
|
5 |
<use xlink:href="#twitter-icon"></use> |
6 |
<foreignObject>
|
7 |
<img class="icon" src="img/twitter-icon.png" alt="Twitter"> |
8 |
</foreignObject>
|
9 |
</switch>
|
10 |
</svg>
|
11 |
</a>
|
12 |
<a href="http://dribbble.com/DavidDarnes" title="Dribbble profile"> |
13 |
<svg class="icon" viewBox="0 0 50 50"> |
14 |
<switch>
|
15 |
<use xlink:href="#dribbble-icon"></use> |
16 |
<foreignObject>
|
17 |
<img class="icon" src="img/dribbble-icon.png" alt="Dribbble"> |
18 |
</foreignObject>
|
19 |
</switch>
|
20 |
</svg>
|
21 |
</a>
|
22 |
<a href="http://github.com/DavidDarnes" title="GitHub profile"> |
23 |
<svg class="icon" viewBox="0 0 50 50"> |
24 |
<switch>
|
25 |
<use xlink:href="#github-icon"></use> |
26 |
<foreignObject>
|
27 |
<img class="icon" src="img/github-icon.png" alt="GitHub"> |
28 |
</foreignObject>
|
29 |
</switch>
|
30 |
</svg>
|
31 |
</a>
|
32 |
</div>
|
Если вы верно выполнили шаги, то не увидите никаких изменений при отображении ваших графических элементов, однако теперь вы можете ими повторно воспользоваться (в любом размере) и применить каждый из них на странице множество раз.
Совершенствование ваших спрайтов в формате SVG
Один из положительных моментов при использовании спрайтов SVG заключается в том, что код вашего документа намного чище и его легче читать другим разработчикам. Мы можем еще улучшить наш код.
В коде ниже я заменил элементы в моем SVG-спрайте на элемент symbol, а также переместил атрибут viewbox из элементов svg> на странице в новые элементы symbol.
1 |
<!doctype html>
|
2 |
<html lang="en"> |
3 |
<head>
|
4 |
<meta charset="utf-8" /> |
5 |
<title>David Darnes - Web Designer & Front-end Developer</title> |
6 |
<link rel="stylesheet" type="text/css" href="style.css" /> |
7 |
<!--[if IE]>
|
8 |
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
9 |
<![endif]-->
|
10 |
<svg display="none" version="1.1" xmlns="http://www.w3.org/2000/svg"> |
11 |
<defs>
|
12 |
<symbol id="twitter-icon" viewBox="0 0 50 41" fill="#55ACEE"> |
13 |
<path d="M0,36.3461306 C0.803663004,36.4417973 1.62142857,36.4907387 2.45054945,36.4907387 C7.26336996,36.4907387 11.6928571,34.8346712 15.2086081,32.0564595 C10.71337,31.9727973 6.91959707,28.9779505 5.61245421,24.8624369 C6.23956044,24.9834054 6.88315018,25.0482297 7.54505495,25.0482297 C8.48205128,25.0482297 9.38956044,24.9217207 10.2516484,24.684955 C5.55201465,23.7334595 2.01117216,19.5466577 2.01117216,14.5276667 C2.01117216,14.4840811 2.01117216,14.4406802 2.01190476,14.397464 C3.3970696,15.1733243 4.98095238,15.6392838 6.66501832,15.693027 C3.90860806,13.8354685 2.09487179,10.6648018 2.09487179,7.07102252 C2.09487179,5.17264865 2.6014652,3.39321171 3.48571429,1.86328378 C8.55238095,8.13037387 16.1217949,12.2543829 24.6595238,12.6863604 C24.4844322,11.9282297 24.3934066,11.1375946 24.3934066,10.3257207 C24.3934066,4.60511261 28.9930403,-0.0328738739 34.6664835,-0.0328738739 C37.6210623,-0.0328738739 40.2908425,1.2251982 42.1648352,3.23844595 C44.5047619,2.77377928 46.7032967,1.91167117 48.6880952,0.724702703 C47.9210623,3.14351802 46.2923077,5.17357207 44.1712454,6.45565315 C46.2492674,6.20522072 48.2291209,5.6483964 50.0714286,4.82451802 C48.6941392,6.90185135 46.952381,8.72635135 44.9454212,10.1868378 C44.9652015,10.6310045 44.9750916,11.0777568 44.9750916,11.5269099 C44.9750916,25.2155541 34.6424908,41 15.7472527,41 C9.9459707,41 4.54615385,39.2852027 0,36.3461306 L0,36.3461306 Z" id="bird"></path> |
14 |
</symbol>
|
15 |
<symbol id="dribbble-icon" viewBox="0 0 50 50"> |
16 |
<path d="M25.0002551,0 C11.1927551,0 0.000255102041,11.1925 0.000255102041,25 C0.000255102041,38.8075 11.1927551,50 25.0002551,50 C38.8077551,50 50.0002551,38.8075 50.0002551,25 C50.0002551,11.1925 38.8077551,0 25.0002551,0 L25.0002551,0 L25.0002551,0 Z" id="ball" fill="#EA4C89"></path> |
17 |
<path d="M25.0002551,-0.000510204082 C11.1927551,-0.000510204082 0.000255102041,11.1919898 0.000255102041,24.9994898 C0.000255102041,38.8069898 11.1927551,49.9994898 25.0002551,49.9994898 C38.8077551,49.9994898 50.0002551,38.8069898 50.0002551,24.9994898 C50.0002551,11.1919898 38.8077551,-0.000510204082 25.0002551,-0.000510204082 L25.0002551,-0.000510204082 L25.0002551,-0.000510204082 Z M25.0002551,3.6219898 C30.4465051,3.6219898 35.4177551,5.6594898 39.1927551,9.0119898 C36.4190051,12.6707398 32.2052551,15.1069898 27.9827551,16.7557398 C25.6815051,12.5457398 22.8477551,8.1069898 19.9640051,4.2182398 C21.5777551,3.8282398 23.2640051,3.6219898 25.0002551,3.6219898 L25.0002551,3.6219898 L25.0002551,3.6219898 Z M15.9052551,5.6482398 C18.6915051,9.8169898 21.3915051,13.6832398 23.8590051,18.0594898 C17.6202551,19.6757398 10.5727551,20.6457398 4.0615051,20.6619898 C5.4340051,14.0019898 9.9077551,8.4719898 15.9052551,5.6482398 L15.9052551,5.6482398 L15.9052551,5.6482398 Z M41.5640051,11.4844898 C44.5465051,15.1332398 46.3427551,19.7869898 46.3777551,24.8582398 C41.4327551,23.8844898 36.5140051,23.6282398 31.5077551,24.1332398 C30.9440051,22.7294898 30.2627551,21.3969898 29.6090051,19.9582398 C33.9252551,18.2169898 38.5402551,15.2369898 41.5640051,11.4844898 L41.5640051,11.4844898 L41.5640051,11.4844898 Z M25.5952551,21.3669898 C26.1302551,22.5057398 26.7502551,23.7119898 27.3315051,24.9457398 C20.3690051,28.0157398 12.9640051,32.1182398 9.1190051,39.3107398 C5.7027551,35.5219898 3.6227551,30.5019898 3.6227551,24.9994898 C3.6227551,24.7907398 3.6265051,24.5819898 3.6327551,24.3744898 C11.0890051,24.3382398 18.4077551,23.4057398 25.5952551,21.3669898 L25.5952551,21.3669898 L25.5952551,21.3669898 Z M36.8915051,27.1957398 C39.9990051,27.1857398 43.2102551,27.6194898 46.1115051,28.3832398 C45.1627551,34.3532398 41.7402551,39.5019898 36.9277551,42.7419898 C35.7802551,37.5232398 34.6865051,32.5294898 32.7527551,27.4944898 C34.0865051,27.2957398 35.4790051,27.1994898 36.8915051,27.1957398 L36.8915051,27.1957398 L36.8915051,27.1957398 Z M28.7965051,28.4719898 C30.7677551,33.5619898 32.3140051,39.1994898 33.3515051,44.6857398 C30.7852551,45.7757398 27.9640051,46.3782398 25.0002551,46.3782398 C20.0565051,46.3782398 15.5040051,44.6982398 11.8827551,41.8794898 C15.7540051,35.5982398 21.7502551,30.8457398 28.7965051,28.4719898 L28.7965051,28.4719898 L28.7965051,28.4719898 Z" id="ball-lines" fill="#C32361"></path> |
18 |
</symbol>
|
19 |
<symbol id="github-icon" viewBox="0 0 50 50" fill="#161614"> |
20 |
<path d="M0,25.633467 C0,36.9584555 7.1625894,46.5651047 17.0969029,49.954576 C18.3477086,50.1906116 18.8035237,49.3991056 18.8035237,48.719323 C18.8035237,48.1119247 18.7820375,46.4990147 18.7697597,44.3605321 C11.8158937,45.9089257 10.3486909,40.9238537 10.3486909,40.9238537 C9.21145523,37.9623936 7.57236256,37.1740347 7.57236256,37.1740347 C5.30249547,35.5847282 7.74425243,35.6161996 7.74425243,35.6161996 C10.2535376,35.7971603 11.5734062,38.2582249 11.5734062,38.2582249 C13.8033703,42.1748424 17.4253353,41.0434451 18.8495657,40.3872661 C19.0767059,38.7318697 19.7228276,37.6020459 20.4364775,36.9616026 C14.8853556,36.314865 9.04877375,34.1150132 9.04877375,24.2927848 C9.04877375,21.494976 10.0233279,19.2054306 11.6225176,17.4147071 C11.3646828,16.766396 10.5067682,14.1589893 11.8680745,10.6310438 C11.8680745,10.6310438 13.9660518,9.9418198 18.7421345,13.2589069 C20.73575,12.6892743 22.875165,12.4060315 25.0007674,12.3950166 C27.124835,12.4060315 29.2627152,12.6892743 31.2594002,13.2589069 C36.0324135,9.9418198 38.1273213,10.6310438 38.1273213,10.6310438 C39.4916971,14.1589893 38.6337825,16.766396 38.3774824,17.4147071 C39.9797416,19.2054306 40.9466221,21.494976 40.9466221,24.2927848 C40.9466221,34.1401903 35.1008318,36.3069972 29.5328279,36.9411462 C30.4291108,37.7326523 31.2287056,39.2967816 31.2287056,41.688609 C31.2287056,45.1142725 31.198011,47.8790363 31.198011,48.719323 C31.198011,49.4053999 31.6492219,50.2032002 32.9169097,49.9530025 C42.8435495,46.5556633 50,36.9553083 50,25.633467 C50,11.4760513 38.8056724,0 24.9976979,0 C11.1943276,0 0,11.4760513 0,25.633467 Z" id="octocat"></path> |
21 |
</symbol>
|
22 |
</defs>
|
23 |
</svg>
|
24 |
</head>
|
При использовании symbol> мы не только поступаем семантически более правильно, как минимум в моем примере, но и избавляемся от необходимости повторения атрибута viewbox в наших элементах svg> и use>. Мы можем вернуть удаленные нами ранее элементы title и desc и воспользоваться ими для улучшения удобства использования наших иконок.
Обратите внимание: Учтите, что содержимое элементов по умолчанию отображается в IE7.
1 |
<!doctype html>
|
2 |
<html lang="en"> |
3 |
<head>
|
4 |
<meta charset="utf-8" /> |
5 |
<title>David Darnes - Web Designer & Front-end Developer</title> |
6 |
<link rel="stylesheet" type="text/css" href="style.css" /> |
7 |
<!--[if IE]>
|
8 |
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
9 |
<![endif]-->
|
10 |
<svg display="none" version="1.1" xmlns="http://www.w3.org/2000/svg"> |
11 |
<symbol id="twitter-icon" viewBox="0 0 50 41" fill="#55ACEE"> |
12 |
<title>Twitter</title> |
13 |
<desc>Twitter account</desc> |
14 |
<path d="M0,36.3461306 C0.803663004,36.4417973 1.62142857,36.4907387 2.45054945,36.4907387 C7.26336996,36.4907387 11.6928571,34.8346712 15.2086081,32.0564595 C10.71337,31.9727973 6.91959707,28.9779505 5.61245421,24.8624369 C6.23956044,24.9834054 6.88315018,25.0482297 7.54505495,25.0482297 C8.48205128,25.0482297 9.38956044,24.9217207 10.2516484,24.684955 C5.55201465,23.7334595 2.01117216,19.5466577 2.01117216,14.5276667 C2.01117216,14.4840811 2.01117216,14.4406802 2.01190476,14.397464 C3.3970696,15.1733243 4.98095238,15.6392838 6.66501832,15.693027 C3.90860806,13.8354685 2.09487179,10.6648018 2.09487179,7.07102252 C2.09487179,5.17264865 2.6014652,3.39321171 3.48571429,1.86328378 C8.55238095,8.13037387 16.1217949,12.2543829 24.6595238,12.6863604 C24.4844322,11.9282297 24.3934066,11.1375946 24.3934066,10.3257207 C24.3934066,4.60511261 28.9930403,-0.0328738739 34.6664835,-0.0328738739 C37.6210623,-0.0328738739 40.2908425,1.2251982 42.1648352,3.23844595 C44.5047619,2.77377928 46.7032967,1.91167117 48.6880952,0.724702703 C47.9210623,3.14351802 46.2923077,5.17357207 44.1712454,6.45565315 C46.2492674,6.20522072 48.2291209,5.6483964 50.0714286,4.82451802 C48.6941392,6.90185135 46.952381,8.72635135 44.9454212,10.1868378 C44.9652015,10.6310045 44.9750916,11.0777568 44.9750916,11.5269099 C44.9750916,25.2155541 34.6424908,41 15.7472527,41 C9.9459707,41 4.54615385,39.2852027 0,36.3461306 L0,36.3461306 Z" id="bird"></path> |
15 |
</symbol>
|
16 |
<symbol id="dribbble-icon" viewBox="0 0 50 50"> |
17 |
<title>Dribbble</title> |
18 |
<desc>Dribbble portfolio</desc> |
19 |
<path d="M25.0002551,0 C11.1927551,0 0.000255102041,11.1925 0.000255102041,25 C0.000255102041,38.8075 11.1927551,50 25.0002551,50 C38.8077551,50 50.0002551,38.8075 50.0002551,25 C50.0002551,11.1925 38.8077551,0 25.0002551,0 L25.0002551,0 L25.0002551,0 Z" id="ball" fill="#EA4C89"></path> |
20 |
<path d="M25.0002551,-0.000510204082 C11.1927551,-0.000510204082 0.000255102041,11.1919898 0.000255102041,24.9994898 C0.000255102041,38.8069898 11.1927551,49.9994898 25.0002551,49.9994898 C38.8077551,49.9994898 50.0002551,38.8069898 50.0002551,24.9994898 C50.0002551,11.1919898 38.8077551,-0.000510204082 25.0002551,-0.000510204082 L25.0002551,-0.000510204082 L25.0002551,-0.000510204082 Z M25.0002551,3.6219898 C30.4465051,3.6219898 35.4177551,5.6594898 39.1927551,9.0119898 C36.4190051,12.6707398 32.2052551,15.1069898 27.9827551,16.7557398 C25.6815051,12.5457398 22.8477551,8.1069898 19.9640051,4.2182398 C21.5777551,3.8282398 23.2640051,3.6219898 25.0002551,3.6219898 L25.0002551,3.6219898 L25.0002551,3.6219898 Z M15.9052551,5.6482398 C18.6915051,9.8169898 21.3915051,13.6832398 23.8590051,18.0594898 C17.6202551,19.6757398 10.5727551,20.6457398 4.0615051,20.6619898 C5.4340051,14.0019898 9.9077551,8.4719898 15.9052551,5.6482398 L15.9052551,5.6482398 L15.9052551,5.6482398 Z M41.5640051,11.4844898 C44.5465051,15.1332398 46.3427551,19.7869898 46.3777551,24.8582398 C41.4327551,23.8844898 36.5140051,23.6282398 31.5077551,24.1332398 C30.9440051,22.7294898 30.2627551,21.3969898 29.6090051,19.9582398 C33.9252551,18.2169898 38.5402551,15.2369898 41.5640051,11.4844898 L41.5640051,11.4844898 L41.5640051,11.4844898 Z M25.5952551,21.3669898 C26.1302551,22.5057398 26.7502551,23.7119898 27.3315051,24.9457398 C20.3690051,28.0157398 12.9640051,32.1182398 9.1190051,39.3107398 C5.7027551,35.5219898 3.6227551,30.5019898 3.6227551,24.9994898 C3.6227551,24.7907398 3.6265051,24.5819898 3.6327551,24.3744898 C11.0890051,24.3382398 18.4077551,23.4057398 25.5952551,21.3669898 L25.5952551,21.3669898 L25.5952551,21.3669898 Z M36.8915051,27.1957398 C39.9990051,27.1857398 43.2102551,27.6194898 46.1115051,28.3832398 C45.1627551,34.3532398 41.7402551,39.5019898 36.9277551,42.7419898 C35.7802551,37.5232398 34.6865051,32.5294898 32.7527551,27.4944898 C34.0865051,27.2957398 35.4790051,27.1994898 36.8915051,27.1957398 L36.8915051,27.1957398 L36.8915051,27.1957398 Z M28.7965051,28.4719898 C30.7677551,33.5619898 32.3140051,39.1994898 33.3515051,44.6857398 C30.7852551,45.7757398 27.9640051,46.3782398 25.0002551,46.3782398 C20.0565051,46.3782398 15.5040051,44.6982398 11.8827551,41.8794898 C15.7540051,35.5982398 21.7502551,30.8457398 28.7965051,28.4719898 L28.7965051,28.4719898 L28.7965051,28.4719898 Z" id="ball-lines" fill="#C32361"></path> |
21 |
</symbol>
|
22 |
<symbol id="github-icon" viewBox="0 0 50 50" fill="#161614"> |
23 |
<title>GitHub</title> |
24 |
<desc>GitHub account</desc> |
25 |
<path d="M0,25.633467 C0,36.9584555 7.1625894,46.5651047 17.0969029,49.954576 C18.3477086,50.1906116 18.8035237,49.3991056 18.8035237,48.719323 C18.8035237,48.1119247 18.7820375,46.4990147 18.7697597,44.3605321 C11.8158937,45.9089257 10.3486909,40.9238537 10.3486909,40.9238537 C9.21145523,37.9623936 7.57236256,37.1740347 7.57236256,37.1740347 C5.30249547,35.5847282 7.74425243,35.6161996 7.74425243,35.6161996 C10.2535376,35.7971603 11.5734062,38.2582249 11.5734062,38.2582249 C13.8033703,42.1748424 17.4253353,41.0434451 18.8495657,40.3872661 C19.0767059,38.7318697 19.7228276,37.6020459 20.4364775,36.9616026 C14.8853556,36.314865 9.04877375,34.1150132 9.04877375,24.2927848 C9.04877375,21.494976 10.0233279,19.2054306 11.6225176,17.4147071 C11.3646828,16.766396 10.5067682,14.1589893 11.8680745,10.6310438 C11.8680745,10.6310438 13.9660518,9.9418198 18.7421345,13.2589069 C20.73575,12.6892743 22.875165,12.4060315 25.0007674,12.3950166 C27.124835,12.4060315 29.2627152,12.6892743 31.2594002,13.2589069 C36.0324135,9.9418198 38.1273213,10.6310438 38.1273213,10.6310438 C39.4916971,14.1589893 38.6337825,16.766396 38.3774824,17.4147071 C39.9797416,19.2054306 40.9466221,21.494976 40.9466221,24.2927848 C40.9466221,34.1401903 35.1008318,36.3069972 29.5328279,36.9411462 C30.4291108,37.7326523 31.2287056,39.2967816 31.2287056,41.688609 C31.2287056,45.1142725 31.198011,47.8790363 31.198011,48.719323 C31.198011,49.4053999 31.6492219,50.2032002 32.9169097,49.9530025 C42.8435495,46.5556633 50,36.9553083 50,25.633467 C50,11.4760513 38.8056724,0 24.9976979,0 C11.1943276,0 0,11.4760513 0,25.633467 Z" id="octocat"></path> |
26 |
</symbol>
|
27 |
</svg>
|
28 |
</head>
|
За счет замены элементов g на symbol мы смогли добавить все эти улучшения. Также мы можем удалить элемент из спрайта SVG, благодаря чему наш код станет чище.
Заключение
Вот и все. То, что представляло из себя вначале всего лишь растровые иконки, теперь стало чрезвычайно мощными векторными иконками, которыми можно запросто воспользоваться повторно и размер которых можно с легкостью изменить. Надеюсь, что вам понравилось это руководство и понравится работать с изображениями в формате SVG в вашем следующем проекте.
