Как масштабировать svg в css

Как правильно задать размеры SVG для фона

Хочу сверстать на svg фоновую картинку, внутри самого svg будут разные детали. Идея в том, чтобы всю эту конструкцию без проблем можно было бы подогнать под все разрешения и размеры экранов. С мобильными устройствами все понятно, придется несколько по-другому реализовать. Меня интересует именно как правильно реализовать width=»» height=»» самого svg и как правильно подогнать viewBox=»0 0 N N» ко всей этой конструкции. То что можно svg вкладывать svg я в курсе. В первом примере у нас viewBox=»0 0 600 300″ такой. см второй пример

А вот во втором примере viewBox=»0 0 1200 700″ и естественно, дает такую разницу.

Если открыть эти два примера одновременно, мы видим, что у нас при одном и том же размере экрана картинки выглядят по-разному, как сделать, чтобы они выглядели одинаково и viewBox=»0 0 N N» подгонялся на всю ширину экрана? Знаю, что width=»» height=»» для svg можно задать в процентах. А вот viewBox=»0 0 N N» можно реализовать в процентах, и как это все грамотно и правильно реализовать?

Масштабируем CSS спрайты с SVG, убивая сразу трех зайцев

Привет, Хабр.
Сразу хочу отметить, что если мы говорим об иконках, их можно масштабировать двумя способами (других я просто не знаю): конвертировать иконки в шрифт и подключать их через @font-face, либо использовать SVG в качестве формата для этих иконок.

Немного отойду от темы и расскажу предысторию.

Предыстория

Я было решил использовать у себя на сайте шрифтовые иконки, казалось бы все хорошо: и размер менять можно, и цвет задавать и запрос к серверу всего один (на подключение шрифта). Другими словами, подключаемый шрифт это и есть своеобразный «CSS спрайт», верно?

Я давай проверять, везде ли все красиво выглядит. Оказалось, что не все так хорошо как хотелось бы, потому как в некоторых размерах иконки выглядели кособокими, а при отключенном сглаживании вообще противно смотреть на них стало. Что делать? Использовать второй вариант — SVG, о чем и пойдет речь.

CSS спрайт с SVG

Идея складывать спрайт в SVG формат не нова. Наверняка, многие читали этот пост на smashingmagazine. Так вот, я решил развить мысль автора, поэкспериментировать и предложить более гибкий вариант. А чтобы стало все понятно, некоторые примеры повторю здесь.

Итак, для начала нам нужно сделать SVG спрайт. Как сделать SVG файл программно я пока не разобрался (надеюсь сообщество меня простит и даст ссылку где про это почитать). Поэтому я буду делать свой спрайт в CorelDRAW (Illustrator думаю тоже подойдет) и сохранять в SVG.

Для быстрой реализации я использовал шрифт и напечатал вот такие иконки (кликабельно):

Возьмем произвольный HTML код для примера:

 
Twitter Facebook Вконтакте Google+ RSS 
 

Напишем в CSS самое основное:

.icons a < float: left; display: inline-block; padding: 4px 0 4px 25px; margin-right: 5px; text-decoration: none; color: #444; /* вызов спрайта и задание размеров */ background-image: url('sprite.svg'); background-repeat: no-repeat; background-size: 20px auto; >/* такой вариант рассмотрен на smashingmagazine.com, только вместо px используются em как относительная величина */ .icons .tw .icons .fb .icons .vk .icons .gl .icons .rs

Стоит отметить одну особенность, что sprite.svg создан с четко заданными размерами 76×520, т.е. максимальный размер до которого мы можем увеличить нашу иконку будет 76×76.

А что если сохранить SVG с относительными размерами, те. в процентах? Это ведь лучше, т.к. иконки теперь можно будет масштабировать до абсолютно любого размера и не терять при этом их качества.

Немного подправим стили в CSS:

/* этот блок остается без изменений */ .icons a < float: left; display: inline-block; padding: 4px 0 4px 25px; margin-right: 5px; text-decoration: none; color: #444; /* вызов спрайта и задание размеров */ background-image: url('sprite.svg'); background-repeat: no-repeat; background-size: 20px auto; >/* а здесь меняем абсолютную величину на относительную */ .icons .tw .icons .fb .icons .vk .icons .gl .icons .rs

Результат одинаковый, но background-size может быть любым, каким угодно.

Создание сложных спрайтов

В примере выше использовано всего 5 иконок и высчитать проценты не так сложно. Давайте рассмотрим более сложный пример. Пока с теми же «шрифтовыми» иконками. Допустим у нас такой спрайт:

Что мы делаем, либо добавлем в html новый тег i , для которого можем написать стили с иконкой:

 
 Twitter Facebook Вконтакте Google+ RSS 
 

Либо оформляем иконку используя псевдоэлементы ::before или ::after . Я буду использовать псевдоэлемент ::before , вы — как вам больше нравится.

Обратите внимание, что я не стал придумывать новые классы для ссылок (ведь спрайт поменялся) и оставил прежние, разумеется для новых иконок классы будут свои. А мы рассмотрим с этими, чтоб не захламить кодом пост.

Итак, внесем изменения в CSS:

.icons a < float: left; display: inline-block; padding: 4px 0 4px 25px; margin-right: 5px; text-decoration: none; color: #444; /* добавляем */ position: relative; >/* создаем общий стиль для ::before */ .icons a::before < position: absolute; left: 0; top: 0; content: ''; width: 25px; height: 25px; /* вызов спрайта и задание размеров */ background-image: url('sprite.svg'); background-repeat: no-repeat; background-size: 20px auto; >/* а здесь дописываем псевдоэлемент и задаем позицию в спрайте (соответственно для нового спрайта позиции будут другие, о чем ниже) */ .icons .tw::before .icons .fb::before .icons .vk::before .icons .gl::before .icons .rs::before

Сделаю несколько пояснений, а то я уже сам чуть было не запутался :).

В background-size: 20px auto; число «20» это необходимый нам размер иконки, а «auto» это оставшийся размер спрайта. Если мы заменим «auto» например на 20px, то у нас вместо одной иконки получится весь спрайт размером 20×20 пикселей.

Кроме того, на размер иконки теперь еще влияет ширина и высота блока формируемая псевдоэлементом, т.е. вместе с background-size теперь нужно менять width и height , чтобы иконка не обрезалась.

Высчитываем относительные размеры

Пожалуй, это ключевой момент и здесь стоит сделать выбор, либо вы задаете абсолютные размеры и при изменении background-size , width и height меняете их тоже, либо (что сложнее) высчитываете относительные размеры и при изменении background-size , width и height больше ничего не меняете.

Итак, фактический размер спрайта 500×250 пикселей, по 10 иконок в строчку и по 5 в столбик, итого 50 иконок (в примере 49) размером 50×50 пикселей каждая.

Высчитать размер довольно просто, т.к. будем отталкиваться от фактического размера спрайта. Кто работал со спрайтами объяснять не стоит. Правда здесь есть одна тонкость — размер иконки у нас уменьшен до 20 пикселей, соотвественно спрайт тоже изменился и стал равен 200×100 пикселей (10*20 и 5*20), а значит и размеры ( background-position ) мы будем считать, либо 0 0, 0 -20px, -20px 0, -20px -20px, 0 -40px, -40px 0, -40px -40px и т.д., либо 0 0, 0 -11,1%, 0 -22,2%, 0 -33,3, 25% 0, 25% -11,1%, 25% -22,2%, 25% -33,3 и т.д.

Таким образом мы можем сделать любой сложности спрайт и высчитать background-position для каждого элемента. К счастью или сожалению, пытливый ум не дает остановиться на сказанном, поэтому бегло рассмотрим еще более сложный пример.

Более сложный спрайт с SVG

Допустим, у нас есть некий дизайн, совсем приблизительно изобразил (кликабельно):

Предположим, что прямоугольники это какие-то красивые клипарты, трудно, но предположим. Что мы можем сделать:
1. Сложить все слои в спрайт не меняя исходный размер и позиционировать каждый объект в соответствующем элементе;
2. Сложить все слои в спрайт, предварительно приведя все объекты к одному размеру и позиционировать каждый объект в соответствующем элементе меняя размер объекта до неоходимой величины.

Приводить пример HTML или CSS кода, думаю, уже не имеет смысла. И так все понятно, настраивается по аналогии с предыдущими примерами.

В заключении

Теперь хочу подвести итог и отметить плюсы спрайтов с SVG. Во-первых, у нас получился всего один файл, а значит один запрос к северу — заяц1 убит, во-вторых, вес SVG файла гораздо меньше, чем например PNG или JPG, а значит и скорость загрузки выше — заяц2 убит, в-третьих, мы получили неограниченных размеров спрайт без потери качества изображения, а значит решили задачу с неограниченным масштабированием изображения — заяц3 убит.

Единственный минус SVG перед шрифтовыми иконками: нельзя украшать иконки с помощью CSS, например, добавлять text-shadow или менять цвет. И очень большой плюс, что при отключенном сглаживании все линии в SVG будут ровные и четкие в отличае от шрифта.

P.S. SVG дает нам огромное поле для деятельности и на примере CSS спрайтов я в этом полностью убедился. Конечно, можно было обойтись сухими словами и сказать «сохраняйте SVG в относительных размерах», но у меня это вылилось в целый пост.

Спасибо за внимание. До новых встреч.

UPD: ::before и ::after это псевдоэлементы, а не псевдоклассы — простите, ошибся, поправил. Спасибо psywalker вовремя подсказал.
UPD: А про «::» я и не вспомнил 🙁 Пруф

Как добавить поддержку SVG в WordPress

По умолчанию WordPress поддерживает множество графических форматов, в том числе .jpg, .jpeg, .png и .gif. Но CMS не позволяет использовать масштабируемую векторную графику (SVG). К счастью, добавить поддержку SVG в WordPress довольно просто.

В этой статье мы рассмотрим, что такое SVG. Затем мы научим вас добавлять поддержку SVG в WordPress, используя два разных метода.

Что такое масштабируемая векторная графика и чем она полезна

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

SVG не является форматом изображений как таковым. Это язык разметки, который используется для создания двумерных изображений, состоящих из векторов. Определение может показаться сложным. Но на практике вы будете использовать SVG так же, как и другие форматы изображений.

При этом SVG обладают преимуществами по сравнению с более распространенными форматами изображений. Например:

• Занимают меньше места. Вместо пикселей SVG состоит из векторов. Таким образом, изображения будут иметь меньший вес.
• Легко масштабировать. Существуют пределы того, насколько можно масштабировать обычные изображения, прежде чем они начнут выглядеть ужасно. Это не относится к SVG, поскольку векторы можно увеличивать без потери качества.
• Можно анимировать SVG с помощью CSS. Что позволяет создать уникальные эффекты (мы поговорим об этом позже).

Создание собственных SVG может быть достаточно сложным процессом. Тем не менее, вы всегда сможете найти SVG- изображения или попросить дизайнера воспроизвести некоторые элементы сайта, используя именно этот формат.

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

Как добавить поддержку SVG в WordPress (два простых способа)

По умолчанию WordPress не поддерживает формат SVG. Но это можно исправить вручную или использовать специальный плагин.

Способ 1. Использование плагина SVG Support

Мы собираемся использовать плагин, активирующий поддержку формата SVG в библиотеке медиа.

После установки и настройки плагина вы сможете добавлять SVG-файлы на свой WordPress-сайт. В расширении есть две настройки, которые можно изменить в зависимости от ваших потребностей. Для начала перейдем на вкладку « Настройки» → «Поддержка SVG »:

Здесь вы найдете два параметра. Первый включает расширенный режим работы плагина, который позволяет ориентировать SVG с помощью CSS. Если вы не хотите анимировать SVG, то можете пропустить эту опцию.

Также можно активировать возможность загрузки SVG только для администратора, включив параметр « Ограничить для администраторов»?

Способ 2: Изменить файл functions.php

Файл functions.php в себя важные функции, классы и фильтры. Также через него можно добавить поддержку формата SVG в WordPress.

Чтобы получить доступ к этому файлу, зайдите на свой сайт с помощью FTP. Если у вас нет FTP-клиента, мы рекомендуем использовать FileZilla. После этого перейдите в корневую папку, которая обычно называется public_html или совпадает с именем сайта.

Затем зайдите в папку wp-includes и найдите functions.php. Важно отметить, что это родительский файл. Отдельные файлы functions.php существуют в каждой теме

В качестве примера мы добавим код в родительский файл functions.php. Но обратите внимания, что внесенные изменения теряются при обновлении WordPress. Поэтому данный код лучше добавлять в файл functions.php используемой темы оформления.

Откройте functions.php, кликнув по нему правой кнопкой мыши и выбрав пункт Просмотр / Редактирование . Файл откроется в текстовом редакторе, используемом по умолчанию. Перейдите вниз и вставьте фрагмент кода, приведенный ниже:

function add_file_types_to_uploads($file_types) < $new_filetypes = array(); $new_filetypes['svg'] = 'image/svg+xml'; $file_types = array_merge($file_types, $new_filetypes ); return $file_types; >add_action('upload_mimes', 'add_file_types_to_uploads');

Сохраните изменения и закройте файл. Затем вернитесь в панель администрирования и протестируйте новую функцию, загрузив SVG- файл в медиа библиотеку сайта!

Анимирование SVG-изображений с помощью CSS

Анимирование SVG-файлов является довольно сложным процессом. Но она позволяет создавать анимацию, которая имеет небольшой размер. Также вы сможете масштабировать анимированные SVG-файлы по мере необходимости, чего нельзя достичь при работе с GIF-файлами.

Заключение

SVG — один из самых интересных форматов изображений, которые можно использовать на своем сайте. Масштабируемость делает его хорошим вариантом для адаптивных сайтов и позволяет обойтись без использования GIF-файлы.

Появились вопросы о том, как добавить поддержку SVG в WordPress? Задайте их в комментариях!

Вадим Дворников автор-переводчик статьи « How to Add SVG to WordPress Your Guide to Vector Images in WordPress »

Форматы изображений для веба

Хороший верстальщик должен уметь правильно выбирать форматы изображений для своей вёрстки, чтобы изображения отображались без погрешностей и имели оптимальный размер при загрузке. Давайте разберёмся, какие бывают форматы изображений и в каких ситуациях лучше выбрать тот или иной формат.

Растровые форматы

Для начала рассмотрим форматы, которые относятся к растровой графике: GIF, JPEG, PNG и WebP.

Основные характеристики, которые нас будут интересовать при выборе формата — это качество изображения, вес и количество цветов. В вебе тяжёлые изображения непрактичны, поскольку они долго загружаются. Чтобы уменьшить вес файла, используются алгоритмы сжатия. Сжатие может быть с потерями и без потерь. При выборе подходящего формата изображения, нам нужно найти баланс между весом файла и качеством картинки, так как некоторые алгоритмы сжимают изображения с потерей качества. Теперь рассмотрим каждый из форматов подробнее.

GIF (Graphics Interchange Format)

Формат был разработан компанией CompuServe в далёком 1987 для передачи растровых изображений по интернету. GIF имеет цветовую палитру, состоящую из 256 цветов. Алгоритм GIF выбирает 256 наиболее используемых в исходном изображении цветов, а все остальные оттенки создаются путём подмешивания — подбора соседних пикселей таким образом, чтобы человеческий глаз воспринимал их как нужный цвет. По этой причине GIF не подходит для хранения полноцветных изображений и фотографий.

Формат поддерживает прозрачность — каждый пиксель изображения может быть в двух состояниях: прозрачный или непрозрачный, полупрозрачность не поддерживается.

Особенностью GIF является поддержка анимации, то есть этот формат может хранить несколько кадров, которые сменяют друг друга с определённой частотой.

Таким образом, формат GIF подходит если:

• изображение не многоцветное;
• нужна простейшая прозрачность;
• нужна анимация.

JPEG (Joint Photographic Experts Group)

Формат JPEG получил своё название от объединённого комитета экспертов по фотографии, который и создал этот стандарт в конце 80-х — начале 90-х годов. Он был разработан для сжатия и хранения полноцветных фотографий. Поддерживает более 16 миллионов цветов.

Формат JPEG сжимает изображения с потерей качества. Алгоритм сжатия основан на разбиении исходного изображения на квадраты 8×8 пикселей, и последующей их группировке. Можно получать JPEG изображения очень маленького веса, но только за счёт ухудшения качества картинки, можно получить и очень качественные JPEG, но тогда картинка будет слишком тяжёлой. Поэтому главная задача при работе с JPEG — подобрать такой уровень качества, чтобы вес был небольшой и качество картинки было приемлемым (обычно, это диапазон от 60 до 70, но нужно тестировать на каждой картинке).

Первая картинка весит 20 килобайт. Это круто, очень мало, но для этого мы задали уровень качества 10 и картинка выглядит плохо.

Вторая картинка с уровнем качества 60 весит чуть больше первой — 65 килобайт, но выглядит уже хорошо.

Для третьей картинки мы задали уровень качества 95, из-за чего её вес стал 169 килобайт. Вторая и третья картинка внешне почти неразличимы, однако вторая картинка весит на 104 килобайта легче.

Таким образом, формат JPEG лучше подходит для:

• полноцветных изображений, фотографий;
• изображений, с плавным переходом яркости и контраста;
• рисунков с большим количеством разноцветных деталей.

PNG (Portable Network Graphics)

PNG является относительно недавним форматом, который был введён как альтернатива для GIF-файлов.

PNG является форматом сжатия без потерь и позволяет сохранять изображения, в которых требуется особенная чёткость. Например, чертежи и печатный текст.

Формат имеет две вариации: PNG8 и PNG24. PNG8 может хранить лишь 256 цветов, а PNG24 использует уже более 16 миллионов цветов.

Главная особенность формата PNG — поддержка альфа-прозрачности, то есть каждому пикселю в отдельности можно задать свою степень прозрачности.

Итак, формат PNG подходит для:

• изображений с прозрачностью и полупрозрачностью;
• когда необходима повышенная точность полноцветных изображений;
• изображений с резкими переходами цветов.

WebP

WebP — новый формат, созданный и развиваемый с 2010 года компанией Google.

Главная цель этого проекта — ещё больше уменьшить вес при сохранении такого же качества.

Формат использует новый алгоритм сжатия, в котором искажения отличаются от искажений других форматов. Ухудшается детализация и структура, в то время как края остаются чёткими.

• сжимает изображения без потерь лучше, чем PNG (на 26% по данным Google);
• сжимает изображения с потерями лучше, чем JPEG (на 25–34% по данным Google);
• поддерживает прозрачность (альфа-канал).

Иногда WebP сжимает изображение даже лучше, чем заявляет Google.

Ввиду относительной новизны формата, не все браузеры умеют с ним работать. На сегодняшний день WebP поддерживается только Chrome, Opera и Firefox.

Векторные форматы

GIF, JPEG, PNG, и WebP — растровые форматы, основанные на дискретном (пиксельном, точечном) представлении изображения, в то время как векторные форматы основаны на математических формулах (геометрическом представлении фигур).

SVG (Scalable Vector Graphics)

SVG переводится как — масштабируемая векторная графика. Формат существует с 1999 года.

Размер объектов SVG намного меньше размера растровых изображений, а сами изображения не теряют в качестве при масштабировании. В отличие от растровых форматов мы можем взаимодействовать с изображениями в формате SVG — при помощи CSS можно изменять параметры графики: цвет, прозрачность или границы, а при помощи JavaScript — анимировать изображение.

SVG поддерживается почти всеми браузерами за исключением Internet Explorer 8 и ниже, но и это можно решить подключением JavaScript-библиотек, например, SVGeezy.

Формат SVG отлично подходит для малоцветных схем, логотипов и иконок, например, таких:

Таким образом, формат SVG подходит если:

• нужно анимировать части изображения;
• изменять цвет элементов изображения;
• необходимо масштабировать изображение без потерь.

Форматы в зависимости от цели использования

Под фотографическими изображениями понимаются полноцветные фотографии, чёрно-белые фотографии, полноцветные изображения, рисунки с большим количеством разноцветных деталей. Под графикой, логотипами, иконками — графика со множеством сплошных цветов, с небольшим количеством цветов (до 256 цветов), с текстом или линиями, с прозрачностью.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.