Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
КАК Я ПЕРЕСТАЛ БОЯТЬСЯ И 
ПОЛЮБИЛ SVG 
Руслан Каймаков 
Frontend-разработчик 
MoscowJS 17 
27.11.14
• Что такое SVG 
• Использование SVG спрайтов 
2
ЧТО ТАКОЕ SVG? 
• Двухмерная векторная графика 
• Подмножество XML 
3
ЗАЧЕМ? 
• Одинаково выглядит на любых экранах 
• Хорошо масштабируется 
• Малый вес в сравнении с png и jpeg 
• Можно стил...
КАК СОЗДАТЬ SVG? 
• Sketch 
• Illustrator 
• Avocode 
• Photoshop 
5 
Редакторы:
КАК СОЗДАТЬ SVG? 
• Vector Magic 
6 
Конвертирование: 
Оптимизация: 
• SVGO
КАК СОЗДАТЬ SVG? 
7
СПРАЙТЫ 
SVG можно использовать в спрайтах 
8
СПРАЙТЫ 
9
СПОСОБЫ ПОДКЛЮЧЕНИЯ 
• <SVG> + <USE> 
• background-image 
• FontFace 
10
SVG USE 
11 
<body> 
<svg display=“none”> 
<defs> 
<symbol id="Rambler" viewBox="0 0 300 35”>…</symbol> 
<symbol id="Mosco...
SVG USE 
12 
Инструменты: 
• grunt-svgstore 
• IcoMoon
13 
Плюсы: 
• Работает в любом браузере с поддержкой SVG 
• Полная поддержка возможностей SVG 
Минусы: 
• Нельзя кешироват...
SVG USE EXTERNAL FILE 
<body> 
… 
<svg class=“icon-rambler”> 
<use xlink:href=“sprite.svg#Rambler"></use> 
</svg> 
… 
</bo...
SVG USE EXTERNAL FILE 
15 
Инструменты: 
• grunt-svgstore 
• IcoMoon
SVG USE EXTERNAL FILE 
16 
Плюсы: 
• Полная поддержка возможностей SVG 
• Можно кешировать 
Минусы: 
• Не работает в IE 
•...
BACKGROUND-IMAGE 
.icon-rambler { 
background: url(icons.svg) no-repeat 0 0; 
width: 300px; 
height: 35px; 
} 
<body> 
… 
...
BACKGROUND-IMAGE 
18 
Инструменты: 
• grunt-iconizrn
BACKGROUND-IMAGE 
19 
Плюсы: 
• Работает в любом браузере с поддержкой SVG 
• Можно кешировать 
Минусы: 
• Ограниченные во...
FONTFACE 
<body> 
… 
<i class=“icon-rambler"></i> 
… 
</body> 
20 
.icon-rambler:before { 
… 
font-family: "FontIcon"; 
co...
FONTFACE 
21 
Инструменты: 
• grunt-webfont 
• Font Custom 
• IcoMoon, Fontello
FONTFACE 
22 
Плюсы: 
• Самая лучшая поддержка среди браузеров 
• Можно кешировать 
Минусы: 
• Ограниченные возможности SV...
СРАВНЕНИЕ 
Тип CSS Стабильность 
SVG USE Любую часть изображения + 
background-image Только целое изображение + 
FontFace ...
БРАУЗЕРЫ 
Тип Поддержка Fallback 
SVG USE Chrome, Opera, FF, Safari, IE9+ SVG for Everybody(IE9+) extrenal 
24 
file only ...
http://bit.ly/ilovesvg 
ВСЕМ СПАСИБО! 
Работайте #ВХорошейКомпании 
25 
@mrmoranxp 
mrmoranxp@gmail.com 
hr@rambler-co.ru
RAMBLER&CO 
26
RAMBLER&CO 
27
Upcoming SlideShare
Loading in …5
×

1

Share

Download to read offline

Как я перестал бояться и полюбил SVG -- Руслан Каймаков -- MoscowJS 17

Download to read offline

Слайды доклада Руслана Каймакова "Как я перестал бояться и полюбил SVG. MoscowJS 17

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Как я перестал бояться и полюбил SVG -- Руслан Каймаков -- MoscowJS 17

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

    Apr. 25, 2015

Слайды доклада Руслана Каймакова "Как я перестал бояться и полюбил SVG. MoscowJS 17

Views

Total views

2,015

On Slideshare

0

From embeds

0

Number of embeds

48

Actions

Downloads

4

Shares

0

Comments

0

Likes

1

×