Как в svg поменять цвет. Приёмы для уменьшения размеров файла

SVG — это новый стандарт для векторных изображений в браузере. Векторные редакторы, такие как Adobe Illustrator, позволяют напрямую сохранить файл в данном формате, а у современных браузеров нет никаких проблем с правильным отображением SVG. Так как SVG графика состоит из разметки, она может быть создана и модифицирована в вашем любимом текстовом редакторе, который вы используете для HTML. Даже есть возможность стилизовать SVG с помощью CSS, но здесь есть несколько тонкостей.

Разделительная линия между HTML и CSS - довольно прямая. HTML отвечает за содержании и структуру, а CSS заботится о внешности проектов. В SVG эта линия размыта. Это главная причина, почему текст и формы в SVG, как правило, контролируется с помощью атрибутов элементов а не CSS:

В этом примере мы нарисовали прямоугольник, который закрашен с помощью fill. Цвет и прочность внешней рамки прямоугольника определяется атрибутами stroke и stroke-width.. Но, прямоугольник можно стилизовать точно также используя CSS:

Однако это не срабатывает для всех атрибутов. Вы не сможете определить позиции и значения для ширины и высоты данным образом. Мы просто будем придерживаться атрибутов y , width и height.

Так же, как и в HTML мы могли бы работать с классами и ID на любом элементе. Таким образом, мы бы задали внешний вид множеству элементов в SVG с помощью стилизованного класса.

Использование псевдо-классов

Использование псевдо-классов таких как:hover - возможно в SVG , даже в сочетании с CSS3 свойством transition.

Внедрив этот пример, hover элементы несущие example класс, приведет к изменению цвета с красного на синий. Чтобы это работало должным образом, убедитесь, что SVG не вставлен как Img. Лучше выберите Embed или Iframe:

Использование Img поможет отобразить SVG должным образом. Но, hover эффекты и transitions будут игнорироваться. Кроме transition мы могли бы использовать transform, тем самым позваляя элементам масштабироватьсь или поворачиваться.

При использовании CSS3 не забудьте добавить vendor префиксы, для поддержания максимального количества современных браузеров. В то время как у Chrome и Firefox нет никаких проблем с безупречным рендерингом, Internet Explorer откажется показыивать ваши творения даже в самой последней версии, в то время как он вполне способен показывать эти свойства CSS3 при использовании в HTML.

Медиа запросы и SVG

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

Этот пример гарантирует, что элементы класса example не будут показываться, как только видимая ширина падает ниже 800 пикселей. Знайте, что не ширина документа определяет это, но ширина элемента несущая ваш SVG.

В этом примере, элементы класса example не будет показаны, так как заданная ширина всего лишь 500 пикселей. Медиа запросы в SVG также полезны для оптимизации графики для печати.


SVG - формат векторной графики. Буквально его название значит
«масштабируемая векторная графика» (Scalable Vector Graphics). Попросту
говоря, это то, с чем вы работаете в Adobe Illustrator. SVG можно легко
использовать в вебе, но сперва нужно во многом разобраться.
Зачем вообще нужен SVG?
Небольшие размеры файлов, отличное сжатие;
Масштабирование до любого размера, без потери качества (разве что, при совсем
маленьких размерах);
Хорошо выглядит на ретине;
Широкие возможности, которые предоставляют фильтры и интерактивность.
Создадим изображение SVG, с которым будем работать дальше
Создайте произвольный рисунок в Adobe Illustrator. Вот, например, птица киви на
овале.
Обратите внимание, что изображение кадрируется чётко по краям изображения.
Холст в SVG играет не меньшую роль, чем в PNG или JPG.
Adobe Illustrator умеет сохранять в SVG.

При сохранении появится ещё одно диалоговое окно с настройками. Честно говоря, я
не очень в них разбираюсь. Существует целая инструкция по Профилям SVG .
Меня вполне устраивает SVG 1.1.

Здесь стоит отметить, что у вас есть возможность нажать OK и сохранить файл или
же нажать кнопку “SVG Code…”, которая откроет окно TextEdit (по
крайней мере на Mac) с SVG-кодом.

Оба варианта могут пригодиться.
 

 
В Illustrator рабочая область была размером 612px ✕ 502px.
Именно такие размеры будут у изображения на странице, если их не указать
специально. Его размеры можно изменить, задав атрибуты width или height для
 img , так же как для PNG или JPG. Вот пример :
Поддержка браузерами
Один из вариантов: проверка поддержки через Modernizr и замена src для
изображения:
 if
 (!Modernizr.svg) {
 $(".logo img"
).attr("src"
, "images/logo.png"
);
}
Дэвид Бушел (David Bushell) предложил очень простой альтернативный вариант ,
если вы не имеете ничего против JavaScript в разметке:

 "this.onerror=null; this.src="image.png""
>
Для этого способа вставки SVG можно использовать следующие приемы деградации:
 <svg
>
 ... svg
>

<div
 class
="fallback"
>
div
>

И снова используем Modernizr:
 .logo-fallback
 {
 display
: none;
 /* Убедитесь, что размер соответствует размеру SVG */

}
.no-svg
 .logo-fallback
 {
 background-image
: url
(logo.png);
}
Добавляем SVG на страницу с помощью тега