Как я перестал бояться и полюбил SVG -- Руслан Каймаков -- MoscowJS 17
•
1 like•2,037 views
Слайды доклада Руслана Каймакова "Как я перестал бояться и полюбил SVG. MoscowJS 17
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to Как я перестал бояться и полюбил SVG -- Руслан Каймаков -- MoscowJS 17
Similar to Как я перестал бояться и полюбил SVG -- Руслан Каймаков -- MoscowJS 17 (20)
More from MoscowJS
More from MoscowJS (20)
Как я перестал бояться и полюбил SVG -- Руслан Каймаков -- MoscowJS 17
- 1. КАК Я ПЕРЕСТАЛ БОЯТЬСЯ И ПОЛЮБИЛ SVG Руслан Каймаков Frontend-разработчик MoscowJS 17 27.11.14
- 2. • Что такое SVG • Использование SVG спрайтов 2
- 3. ЧТО ТАКОЕ SVG? • Двухмерная векторная графика • Подмножество XML 3
- 4. ЗАЧЕМ? • Одинаково выглядит на любых экранах • Хорошо масштабируется • Малый вес в сравнении с png и jpeg • Можно стилизовать при помощи CSS 4
- 5. КАК СОЗДАТЬ SVG? • Sketch • Illustrator • Avocode • Photoshop 5 Редакторы:
- 6. КАК СОЗДАТЬ SVG? • Vector Magic 6 Конвертирование: Оптимизация: • SVGO
- 7. КАК СОЗДАТЬ SVG? 7
- 8. СПРАЙТЫ SVG можно использовать в спрайтах 8
- 9. СПРАЙТЫ 9
- 10. СПОСОБЫ ПОДКЛЮЧЕНИЯ • <SVG> + <USE> • background-image • FontFace 10
- 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. SVG USE 12 Инструменты: • grunt-svgstore • IcoMoon
- 13. 13 Плюсы: • Работает в любом браузере с поддержкой SVG • Полная поддержка возможностей SVG Минусы: • Нельзя кешировать SVG USE
- 14. SVG USE EXTERNAL FILE <body> … <svg class=“icon-rambler”> <use xlink:href=“sprite.svg#Rambler"></use> </svg> … </body> 14
- 15. SVG USE EXTERNAL FILE 15 Инструменты: • grunt-svgstore • IcoMoon
- 16. SVG USE EXTERNAL FILE 16 Плюсы: • Полная поддержка возможностей SVG • Можно кешировать Минусы: • Не работает в IE • Файл должен лежать на том же домене
- 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. BACKGROUND-IMAGE 18 Инструменты: • grunt-iconizrn
- 19. BACKGROUND-IMAGE 19 Плюсы: • Работает в любом браузере с поддержкой SVG • Можно кешировать Минусы: • Ограниченные возможности SVG
- 20. FONTFACE <body> … <i class=“icon-rambler"></i> … </body> 20 .icon-rambler:before { … font-family: "FontIcon"; content: "f100"; … }
- 21. FONTFACE 21 Инструменты: • grunt-webfont • Font Custom • IcoMoon, Fontello
- 22. FONTFACE 22 Плюсы: • Самая лучшая поддержка среди браузеров • Можно кешировать Минусы: • Ограниченные возможности SVG • Возможны проблемы на некоторых устройствах
- 23. СРАВНЕНИЕ Тип CSS Стабильность SVG USE Любую часть изображения + background-image Только целое изображение + FontFace Только целое изображение - 23
- 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. http://bit.ly/ilovesvg ВСЕМ СПАСИБО! Работайте #ВХорошейКомпании 25 @mrmoranxp mrmoranxp@gmail.com hr@rambler-co.ru
- 26. RAMBLER&CO 26
- 27. RAMBLER&CO 27