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

КАК Я ПЕРЕСТАЛ БОЯТЬСЯ И ПОЛЮБИЛ SVG

Руслан Каймаков Frontend-разработчик

MoscowJS 17 27.11.14

• Что такое SVG

• Использование SVG спрайтов

2

ЧТО ТАКОЕ SVG?

• Двухмерная векторная графика

• Подмножество XML

3

ЗАЧЕМ?

• Одинаково выглядит на любых экранах

• Хорошо масштабируется

• Малый вес в сравнении с png и jpeg

• Можно стилизовать при помощи CSS

4

КАК СОЗДАТЬ SVG?

• Sketch

• Illustrator

• Avocode

• Photoshop

5

Редакторы:


• Vector Magic

6

Конвертирование:

• SVGO

Оптимизация:


7

СПРАЙТЫ

8

SVG можно использовать в спрайтах

СПРАЙТЫ

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="MoscowJS" viewBox="0 0 150 150">…</symbol>

</defs> </svg> … <svg class=“icon-rambler”> <use xlink:href="#Rambler"></use>

</svg> …

</body>

SVG USE

12

Инструменты:

• grunt-svgstore

• IcoMoon

13

Плюсы:

• Работает в любом браузере с поддержкой SVG • Полная поддержка возможностей SVG

Минусы:

• Нельзя кешировать

SVG USE

SVG USE EXTERNAL FILE

14

<body> … <svg class=“icon-rambler”> <use xlink:href=“sprite.svg#Rambler"></use> </svg> … </body>


15


• grunt-svgstore

• IcoMoon

16

Плюсы:

• Полная поддержка возможностей SVG • Можно кешировать

Минусы:

• Не работает в IE • Файл должен лежать на том же домене


BACKGROUND-IMAGE

17

.icon-rambler { background: url(icons.svg) no-repeat 0 0; width: 300px; height: 35px; }

<body> … <img class=“icon-rambler”> … </body>

BACKGROUND-IMAGE

18


• grunt-iconizrn

19

Плюсы:

• Работает в любом браузере с поддержкой SVG • Можно кешировать

Минусы:

• Ограниченные возможности SVG

BACKGROUND-IMAGE

FONTFACE

20

<body> … <i class=“icon-rambler"></i> … </body>

.icon-rambler:before { … font-family: "FontIcon"; content: "\f100"; … }

FONTFACE

21


• grunt-webfont

• Font Custom

• IcoMoon, Fontello

22

Плюсы:

• Самая лучшая поддержка среди браузеров • Можно кешировать

Минусы:

• Ограниченные возможности SVG • Возможны проблемы на некоторых устройствах

FONTFACE

СРАВНЕНИЕ

23

Тип CSS Стабильность

SVG USE Любую часть изображения +

background-image Только целое изображение +

FontFace Только целое изображение -

БРАУЗЕРЫ

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+

ВСЕМ СПАСИБО!

25

http://bit.ly/ilovesvg

[email protected]

[email protected]

@mrmoranxp

Работайте #ВХорошейКомпании

http://bit.ly/ilovesvg

mailto:[email protected]

mailto:[email protected]

RAMBLER&CO

26

RAMBLER&CO

27

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

Software