svg картинки для адаптивного веб дизайна

А вы используете SVG картинки для вашего адаптивного веб-дизайна ?

В наше время пользователи могут зайти на веб сайт и с обычного компьютера или ноутбука, и с различных мобильных устройств (планшеты, смартфоны). Всё это требует постоянного развития методов создания адаптивных веб сайтов. И если мы научились адаптировать размер типографии и вёрстку к различным размерам и форматам веб страницы, одна проблема всё-таки остаётся трудно разрешимой. Я говорю об адаптировании картинок и фото на веб сайтах. Сегодня одно из решений заключается в использовании картинок SVG …

Так что же такое формат SVG ?

Это векторный формат, в основу которого входит техника XML. Благодаря этому, у картинок SVG есть два основных приемущества :

  • Так как это векторная графика, мы можем менять её размер без потери качества изображения. Так, что картинки остаются отменного качества и на маленьких экранах смартфонов, и на больших стационарных экранах Dekstop.
  • Благодаря тому, что этот формат построен в XML, мы можем использовать CSS и JavaScript, чтобы добавить другие интересные методы к нашей графике

 А вот пример программирования :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     width="110px" 
     height="110px" 
     viewBox="-5 -5 110 110">
<path 
      fill="#583702" 
      d="…"></path>
<path  
      fill="#FCFAF2" 
      stroke="#F7E9AA" 
      stroke-width="3" 
      d="…"></path>
</svg>

Есть два способа создания SVG картинок :

1) Способ для программистов :
Для создания SVG картинок необходимы знания языка XML. У Мозилы есть очень хороший тюториал по созданию картинок SVG.

А также можно воспользоваться помощью существующих библиотек :

Raphael JavaScript

Batik Java

Sharp Vectors C#

2) Способ для дизайнеров :

Для тех, кто не любит программирование, существует множество программных обеспечений, с помощью которых можно создать SVG картинку :

Adobe Illustrator

Inkscape

SVG Edit

Aviary Raven

Естественно, качество будет зависеть от опыта и от умения использовать эти программные обеспечения. Например, в Иллюстраторе, надо избегать сложных эффектов и эффектов, заимствованных у Photoshop. Градиенты лучше не использовать.

3) И наконец, можно воспользоваться уже готовыми картинками SVG, которые вы можете найти здесь :

The Noun Project

Open Clip Art

Drylcons

MediaLoot

Как же добавить картинки на сайт ?

  • С помощью тэга <object>. Основное приемущество этого способа – его лёгкое адаптирование в таких браузерах как Internet Explorer 8, Android 2.x..
1
2
3
4
<object data="cupcake.svg" width="110" height="110" type="image/svg+xml">
    <!-- Une solution de repli pour les navigateurs qui ne comprennent pas SVG -->
    <img src="cupcake.png" width="110" height="110" alt="" />
</object>
  •  С помощью тэга <img>. Однако, у этого способа есть несколько минусов :

Невозможность использования некоторых функциональностей (например, использование скриптов). Чтобы добавить описание в тэг необходимо использование JavaScript.

1
<img src="cupcake.svg" width="110" height="110" alt="" />
  • HTML5. Благодаря HTML5, добавить картинку SVG стало крайне просто :
1
2
3
4
5
6
7
8
9
<body>
    <svg width="110" height="110">
        <!-- le reste du code SVG ici -->
        <foreignObject width="0" height="0" overflow="hidden">
            <!-- Une solution de repli pour les navigateurs qui ne comprennent pas SVG -->
            <img src="cupcake.png" width="110" height="110" alt="" />
        </foreignObject>
    </svg>
</body>

Однако, стоит упомянуть об основных минусах этой техники :

  • Не все браузеры поддерживают HTML5
  • Необходимо знать язык SVG
  • И наконец, способ, который я предпочитаю : добавка с помощью CSS

Однако, и у него есть свои минусы :

  • Опять же вопрос поддержки браузера, так как некоторые браузеры могут пиксилизировать картинку.
  • Необходимо использования скрипта Modernizr для поддержки старых браузеров.

Ну а чтобы дизайн всё-таки был адаптивным, необходимо использование процента в указании размера картинки и media-queries. Например :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="monContenu">
    <img src="cupcake.svg" width="100%" alt="" />
</div>

<style>
@media all {
    #monContenu {
        width: 220px;
    }
}

@media all and (max-width: 800px) {
    #monContenu {
        width: 110px;
    }
}

@media all and (max-width: 480px) {
    #monContenu {
        width: 55px;
    }
}
</style>

Бонус : раскрашиваем нашу SVG картинку с помощью CSS

Так как картинки SVG созданы с помощью языка XML, мы может использовать CSS, для того, чтобы поменять некоторые свойства картинки, прямо внутри формата SVG. Например, чтобы поменять цвет картинки :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     width="110px" 
     height="110px" 
     viewBox="-5 -5 110 110">

    <style>
.cake {
        fill: #583702;
    }

.cream {
        fill: #FCFAF2;
        stroke: #F7E9AA;
        stroke-width: 3px; 
    }

    @media print {
.cake {
            fill: #000;
        }

.cream {
            fill: #FFF;
            stroke: #000;
        }
    }
    </style>

    <path d="…"></path>
    <path d="…"></path>
</svg>

Я начала использовать эту технику по-немножку в своих проектах, и теперь она меня выручает !

Оригинальная статья SVG, l’ami du Responsive Web Design

Laisser un commentaire