Работа с SVG. Адаптивность

В этом уроке рассмотрим как добиться адаптивности изображений в формате SVG.

Создание адаптивного SVG изображения

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

<img src="monkey.svg" alt="Monkey face" style="width: 100%; height: auto;">

Иногда этого недостаточно. К примеру, если вы подключаете SVG через тег <object> или напрямую вставляете изображение на страницу. В этом случае изменение размеров обычным способом не сработает.

Делаем SVG адаптивным

После прямой вставки SVG между тегом <body?, HTML страницы будет выглядеть примерно так:

<body>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
<circle fill="#F7941E" stroke="#231F20" stroke-width="10" cx="250"cy="250" r="200" opacity="0.6" />
</svg>
</body>

Если слегка почистить тег <svg>, то код станет более презентабельным:

<svg version="1.1" viewBox="0 0 500 500">
<circle fill="#F7941E" stroke="#231F20" stroke-width="10" cx="250"cy="250" r="200" opacity="0.6" />
</svg>

Удаление лишних атрибутов элемента <svg> делает изображение адаптивным, однако добавляет чуть больше пространства выше и ниже картинки. Атрибут viewBox нужно оставить. Далее нам нужно сделать ещё несколько шагов:

Во-первых, поместите элемент SVG в <div> и добавьте атрибут preserveAspectRatio и класс родительскому элементу <svg>:

<div class="svg-container">
<svg version="1.1" viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet" class="svg-content">
<circle fill="#F7941E" stroke="#231F20" stroke-width="10" stroke-miterlimit="10" cx="250" cy="250" r="200" opacity="0.6" />
</svg>
</div>

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

.svg-container {
display: inline-block;
position: relative;
width: 100%;
padding-bottom: 100%;
vertical-align: middle;
overflow: hidden;
}

А теперь стили непосредственно к SVG:

.svg-content {
display: inline-block;
position: absolute;
top: 0;
left: 0;
}

Данный способ делает SVG адаптивным без нанесения ущерба другим элементам страницы; Этот же способ работает в случае использования тега <object>:

<div class="svg-container">
<object type="image/svg+xml" data="samurai.svg" width="100%"height="100%" class="svg-content">
</object>
</div>

Весь контент SVG будет изменяться в размере, даже текст.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://demosthenes.info/blog/744/Make-SVG-Responsive
Перевел: Станислав Протасевич
Урок создан: 26 Декабря 2014
Просмотров: 13030
Правила перепечатки

5 последних уроков рубрики "HTML5"

  • Расширяем возможности HTML за счёт создания собственных тегов

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

  • Определение доступности атрибута HTML5 с помощью JavaScript

    Сегодня мы посмотрим, как можно организовать проверку доступности атрибута HTML5 с помощью JavaScript. Проверять будем работу элементов details и summary.

  • HTML5: API работы с вибрацией

    HTML5 - глоток свежего воздуха в современном вебе. Она повлиял не только на классический веб, каким мы знаем его сейчас. HTML5 предоставляет разработчикам ряд API для создания и улучшения сайтов с ориентацией на мобильные устройства. В этой статье мы рассмотрим API для работы с вибрацией.

  • Создание форм с помощью Webix Framework — 4 практических примера

    Веб дизайнеры частенько сталкиваются с необходимостью создания форм. Данная задача не простая, и может вызвать головную боль (особенно если вы делаете что-то не стандартное, к примеру, много-страничную форму). Для упрощения жизни можно воспользоваться фрэймворком. В этой статье я покажу вам несколько практических приёмов для создания форм с помощью фрэймворка Webix.

  • Знакомство с фрэймворком Webix

    В этой статье мы бы хотели познакомить вас с фрэймворком Webix. Для демонстрации возможностей данного инструмента мы создадим интерфейс online аудио плеера. Не обольщайтесь — это всего лишь модель интерфейса. Исходный код доступен в демо и на странице GitHub.

^ Наверх ^