Как перестать бояться и начать любить медийку. Алгоритмический маркетинг.
Как я перестал бояться и полюбил SVG -- Руслан Каймаков --...
description
Transcript of Как я перестал бояться и полюбил SVG -- Руслан Каймаков --...
![Page 1: Как я перестал бояться и полюбил SVG -- Руслан Каймаков -- MoscowJS 17](https://reader034.fdocuments.net/reader034/viewer/2022052218/5597a0c41a28abb1098b462e/html5/thumbnails/1.jpg)
КАК Я ПЕРЕСТАЛ БОЯТЬСЯ И ПОЛЮБИЛ SVG
Руслан Каймаков Frontend-разработчик
MoscowJS 17 27.11.14
![Page 2: Как я перестал бояться и полюбил SVG -- Руслан Каймаков -- MoscowJS 17](https://reader034.fdocuments.net/reader034/viewer/2022052218/5597a0c41a28abb1098b462e/html5/thumbnails/2.jpg)
• Что такое SVG
• Использование SVG спрайтов
2
![Page 3: Как я перестал бояться и полюбил SVG -- Руслан Каймаков -- MoscowJS 17](https://reader034.fdocuments.net/reader034/viewer/2022052218/5597a0c41a28abb1098b462e/html5/thumbnails/3.jpg)
ЧТО ТАКОЕ SVG?
• Двухмерная векторная графика
• Подмножество XML
3
![Page 4: Как я перестал бояться и полюбил SVG -- Руслан Каймаков -- MoscowJS 17](https://reader034.fdocuments.net/reader034/viewer/2022052218/5597a0c41a28abb1098b462e/html5/thumbnails/4.jpg)
ЗАЧЕМ?
• Одинаково выглядит на любых экранах
• Хорошо масштабируется
• Малый вес в сравнении с png и jpeg
• Можно стилизовать при помощи CSS
4
![Page 5: Как я перестал бояться и полюбил SVG -- Руслан Каймаков -- MoscowJS 17](https://reader034.fdocuments.net/reader034/viewer/2022052218/5597a0c41a28abb1098b462e/html5/thumbnails/5.jpg)
КАК СОЗДАТЬ SVG?
• Sketch
• Illustrator
• Avocode
• Photoshop
5
Редакторы:
![Page 6: Как я перестал бояться и полюбил SVG -- Руслан Каймаков -- MoscowJS 17](https://reader034.fdocuments.net/reader034/viewer/2022052218/5597a0c41a28abb1098b462e/html5/thumbnails/6.jpg)
КАК СОЗДАТЬ SVG?
• Vector Magic
6
Конвертирование:
• SVGO
Оптимизация:
![Page 7: Как я перестал бояться и полюбил SVG -- Руслан Каймаков -- MoscowJS 17](https://reader034.fdocuments.net/reader034/viewer/2022052218/5597a0c41a28abb1098b462e/html5/thumbnails/7.jpg)
КАК СОЗДАТЬ SVG?
7
![Page 8: Как я перестал бояться и полюбил SVG -- Руслан Каймаков -- MoscowJS 17](https://reader034.fdocuments.net/reader034/viewer/2022052218/5597a0c41a28abb1098b462e/html5/thumbnails/8.jpg)
СПРАЙТЫ
8
SVG можно использовать в спрайтах
![Page 9: Как я перестал бояться и полюбил SVG -- Руслан Каймаков -- MoscowJS 17](https://reader034.fdocuments.net/reader034/viewer/2022052218/5597a0c41a28abb1098b462e/html5/thumbnails/9.jpg)
СПРАЙТЫ
9
![Page 10: Как я перестал бояться и полюбил SVG -- Руслан Каймаков -- MoscowJS 17](https://reader034.fdocuments.net/reader034/viewer/2022052218/5597a0c41a28abb1098b462e/html5/thumbnails/10.jpg)
СПОСОБЫ ПОДКЛЮЧЕНИЯ
• <SVG> + <USE>
• background-image
• FontFace
10
![Page 11: Как я перестал бояться и полюбил SVG -- Руслан Каймаков -- MoscowJS 17](https://reader034.fdocuments.net/reader034/viewer/2022052218/5597a0c41a28abb1098b462e/html5/thumbnails/11.jpg)
SVG USE
11
<body> <svg display=“none”> <defs> <symbol id="Rambler" viewBox="0 0 300 35”>…</symbol> <symbol id="MoscowJS" viewBox="0 0 150 150">…</symbol>
</defs> </svg> … <svg class=“icon-rambler”> <use xlink:href="#Rambler"></use>
</svg> …
</body>
![Page 12: Как я перестал бояться и полюбил SVG -- Руслан Каймаков -- MoscowJS 17](https://reader034.fdocuments.net/reader034/viewer/2022052218/5597a0c41a28abb1098b462e/html5/thumbnails/12.jpg)
SVG USE
12
Инструменты:
• grunt-svgstore
• IcoMoon
![Page 13: Как я перестал бояться и полюбил SVG -- Руслан Каймаков -- MoscowJS 17](https://reader034.fdocuments.net/reader034/viewer/2022052218/5597a0c41a28abb1098b462e/html5/thumbnails/13.jpg)
13
Плюсы:
• Работает в любом браузере с поддержкой SVG • Полная поддержка возможностей SVG
Минусы:
• Нельзя кешировать
SVG USE
![Page 14: Как я перестал бояться и полюбил SVG -- Руслан Каймаков -- MoscowJS 17](https://reader034.fdocuments.net/reader034/viewer/2022052218/5597a0c41a28abb1098b462e/html5/thumbnails/14.jpg)
SVG USE EXTERNAL FILE
14
<body> … <svg class=“icon-rambler”> <use xlink:href=“sprite.svg#Rambler"></use> </svg> … </body>
![Page 15: Как я перестал бояться и полюбил SVG -- Руслан Каймаков -- MoscowJS 17](https://reader034.fdocuments.net/reader034/viewer/2022052218/5597a0c41a28abb1098b462e/html5/thumbnails/15.jpg)
SVG USE EXTERNAL FILE
15
Инструменты:
• grunt-svgstore
• IcoMoon
![Page 16: Как я перестал бояться и полюбил SVG -- Руслан Каймаков -- MoscowJS 17](https://reader034.fdocuments.net/reader034/viewer/2022052218/5597a0c41a28abb1098b462e/html5/thumbnails/16.jpg)
16
Плюсы:
• Полная поддержка возможностей SVG • Можно кешировать
Минусы:
• Не работает в IE • Файл должен лежать на том же домене
SVG USE EXTERNAL FILE
![Page 17: Как я перестал бояться и полюбил SVG -- Руслан Каймаков -- MoscowJS 17](https://reader034.fdocuments.net/reader034/viewer/2022052218/5597a0c41a28abb1098b462e/html5/thumbnails/17.jpg)
BACKGROUND-IMAGE
17
.icon-rambler { background: url(icons.svg) no-repeat 0 0; width: 300px; height: 35px; }
<body> … <img class=“icon-rambler”> … </body>
![Page 18: Как я перестал бояться и полюбил SVG -- Руслан Каймаков -- MoscowJS 17](https://reader034.fdocuments.net/reader034/viewer/2022052218/5597a0c41a28abb1098b462e/html5/thumbnails/18.jpg)
BACKGROUND-IMAGE
18
Инструменты:
• grunt-iconizrn
![Page 19: Как я перестал бояться и полюбил SVG -- Руслан Каймаков -- MoscowJS 17](https://reader034.fdocuments.net/reader034/viewer/2022052218/5597a0c41a28abb1098b462e/html5/thumbnails/19.jpg)
19
Плюсы:
• Работает в любом браузере с поддержкой SVG • Можно кешировать
Минусы:
• Ограниченные возможности SVG
BACKGROUND-IMAGE
![Page 20: Как я перестал бояться и полюбил SVG -- Руслан Каймаков -- MoscowJS 17](https://reader034.fdocuments.net/reader034/viewer/2022052218/5597a0c41a28abb1098b462e/html5/thumbnails/20.jpg)
FONTFACE
20
<body> … <i class=“icon-rambler"></i> … </body>
.icon-rambler:before { … font-family: "FontIcon"; content: "\f100"; … }
![Page 21: Как я перестал бояться и полюбил SVG -- Руслан Каймаков -- MoscowJS 17](https://reader034.fdocuments.net/reader034/viewer/2022052218/5597a0c41a28abb1098b462e/html5/thumbnails/21.jpg)
FONTFACE
21
Инструменты:
• grunt-webfont
• Font Custom
• IcoMoon, Fontello
![Page 22: Как я перестал бояться и полюбил SVG -- Руслан Каймаков -- MoscowJS 17](https://reader034.fdocuments.net/reader034/viewer/2022052218/5597a0c41a28abb1098b462e/html5/thumbnails/22.jpg)
22
Плюсы:
• Самая лучшая поддержка среди браузеров • Можно кешировать
Минусы:
• Ограниченные возможности SVG • Возможны проблемы на некоторых устройствах
FONTFACE
![Page 23: Как я перестал бояться и полюбил SVG -- Руслан Каймаков -- MoscowJS 17](https://reader034.fdocuments.net/reader034/viewer/2022052218/5597a0c41a28abb1098b462e/html5/thumbnails/23.jpg)
СРАВНЕНИЕ
23
Тип CSS Стабильность
SVG USE Любую часть изображения +
background-image Только целое изображение +
FontFace Только целое изображение -
![Page 24: Как я перестал бояться и полюбил SVG -- Руслан Каймаков -- MoscowJS 17](https://reader034.fdocuments.net/reader034/viewer/2022052218/5597a0c41a28abb1098b462e/html5/thumbnails/24.jpg)
БРАУЗЕРЫ
24
Тип Поддержка Fallback
SVG USE Chrome, Opera, FF, Safari, IE9+ SVG for Everybody(IE9+) extrenal file only
background-image Chrome, Opera, FF, Safari, IE9+ PNG (IE8)
FontFace Chrome, Opera, FF, Safari, IE8+
![Page 25: Как я перестал бояться и полюбил SVG -- Руслан Каймаков -- MoscowJS 17](https://reader034.fdocuments.net/reader034/viewer/2022052218/5597a0c41a28abb1098b462e/html5/thumbnails/25.jpg)
ВСЕМ СПАСИБО!
25
http://bit.ly/ilovesvg
@mrmoranxp
Работайте #ВХорошейКомпании
![Page 26: Как я перестал бояться и полюбил SVG -- Руслан Каймаков -- MoscowJS 17](https://reader034.fdocuments.net/reader034/viewer/2022052218/5597a0c41a28abb1098b462e/html5/thumbnails/26.jpg)
RAMBLER&CO
26
![Page 27: Как я перестал бояться и полюбил SVG -- Руслан Каймаков -- MoscowJS 17](https://reader034.fdocuments.net/reader034/viewer/2022052218/5597a0c41a28abb1098b462e/html5/thumbnails/27.jpg)
RAMBLER&CO
27