Advertisement
  1. envato-tuts+
  2. Home
  3. Web Design
  4. HTML/CSS
  5. SVG

Створення крос-браузерних спрайтів у форматі SVG

Scroll to top
David Darnes
Read Time: 20 min

() translation by (you can also view the original English article)

У цьому посібнику ми розглянемо основи реалізації деяких іконок у форматі SVG (* Scalable Vector Graphics – заснований на XML формат відображення векторної графіки у веб-сторінках, ухвалено W3C. Використання у веб-сторінках векторної графіки замість растрової дає змогу зменшити розмір файла, який містить рисунок, виводити зображення однаково незалежно від роздільної здатності екрана, а також спростити створення анімованих зображень), як надати запасний варіант та як їх перетворити у спрайт (* легко переміщуваний по екра­ну растровий графічний елемент (наприклад, куля або ракета), який часто реалізують за допомогою апаратних засобів) у форматі SVG.

Основи реалізації іконок у форматі SVG

Для досягнення цілей нашого посібника я буду використовувати єдину сторінку, яка буде чимось на зразок онлайн-візитки. У ній буде представлено стислі дані про мене та три профілі в мережі, які мають відношення до моєї праці.

іконки взято з flaticon

На скриншоті вище ви бачите, що я використовую іконки (для Twitter, Dribbble та GitHub), щоб надати посилання на мої профілі в мережі. Я завантажив ці іконки з сайту flaticon, який надає широкий вибір іконок та символів як у векторному, так і у растровому форматах.

PNG та SVG

МИ почнемо з використання версії цих іконок у форматі PNG для забезпечення зворотної сумісності, потім ми підготуємо версію у форматі SVG для браузерів з підтримкою цієї технології.

Я скористався Sketch (* редактор векторної графіки для macOS) для виводу моїх іконок у форматі PNG, так що я скористуюсь їм знову для підготування моїх іконок до використання у форматі SVG.

My chosen icons in Sketch with named layers groupsMy chosen icons in Sketch with named layers groupsMy chosen icons in Sketch with named layers groups

Якщо поглянете на скриншот, то помітите, що я дав усім моїм групам та контурам у панелі зліва відповідні імена (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="http://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>

Зверніть увагу на елементи, які я видалив. Зараз елементи  <title>,  <desc> и  <defs> нам не потрібні, проте можливо, що вони нам стануть у пригоді пізніше у ньому посібнику. Також є пара елементів  <g>, які використовується для зазначення груп та відповідають групам, створеним у моєму документі Sketch. За налаштуванням Sketch розміщує все усередині сторінки, тому ми маємо елемент  <g id=”Page-1”… . Ви можете видалити цей елемент, оскільки він нам не потрібний (група, розташована у ньому, важливіша для нас). 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>, одразу після групи, що містить власне іконку.

Далі я оберну  <img> до характерного для мови SVG елементу під назвою foreignObject. Якщо браузер не може інтерпретувати векторну інформацію SVG, то він звернеться замість цього до «нехарактерного об'єкту» та перейде до використання розташованого у ньому елемента  <img>. Також ми повинні дати знати браузеру про те, що він повинен зробити вибір на користь векторної версії зображення, якщо він її підтримує. Саме для цього і потрібен елемент  <switch>, до якого я помістив і групу, і 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 &amp; 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 &amp; 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 &amp; 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. Завдяки елементу  <use> ми можемо вибрати будь-який елемент з елемента  <defs> та додати його у будь-якому місці сторінки. Ми вибираємо елемент за допомогою його 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 полягає в тому, що код вашого документа набагато чистіше та його легше читати іншим розробникам. Ми можемо ще покращити наш код. 


У коді нижче я замінив елементи <g> у моєму 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 &amp; 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 і скористатися ними для покращення зручності  використання наших іконок.


Зверніть увагу: Майте на увазі, що вміст елементів  <desc> за налаштуванням відображується в IE7.






1


<!doctype html>







2


<html lang="en">







3


    <head>







4


		<meta charset="utf-8" />







5


		<title>David Darnes - Web Designer &amp; 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 ми змогли додати всі ці покращення. Також ми можемо видалити елемент <defs> зі спрайту SVG, завдяки чому наш код стане чистіше.


Завершення


От і все. Те, що було спочатку всього-на-всього растровими іконками, тепер стало надзвичайно потужними векторними іконками, якими можна запросто скористатися знову та розмір яких можна з легкістю змінити. Сподіваюся, що вам сподобався цей посібник та сподобається працювати із зображеннями у форматі SVG у вашому наступному проекті.


Advertisement

  
Did you find this post useful?

  

    
    
  

  



Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
David Darnes
David Darnes
Bristol, UK
With over 11 years professional experience, I’ve been building up my skills in design, UI development, and front-end development, working with some really exciting people like Ghost, Stackbit, Envato Tuts+ and BaseKit.
Advertisement
View Online Demo View on GitHub 
Advertisement
Advertisement

  

    

      Looking for something to help kick start your next project?
    

    

      Envato Market has a range of items for sale to help get you started.
    

  

  
WordPress Themes
From $13
Magento Themes
From $17
ECommerce Websites
From $16
HTML5 Templates
From $4




Unlimited Downloads
From $16.50/month
Get access to over one million creative assets on Envato Elements.
 Over 9 Million Digital Assets
 Everything you need for your next creative project.
 Create Beautiful Logos, Designs 
 & Mockups in Seconds
 Design like a professional without Photoshop.
 Join the Community
 Share ideas. Host meetups. Lead discussions. Collaborate.
Quick LinksExplore popular categories