В этой статье мы будем смотреть на Scalable Vector Graphics (SVG), одного из самых недостаточно используемых технологий разработки веб-сайта today.

Перед погружением в качестве примера, давайте рассмотрим состояние Web в настоящее время и куда он идет.Дизайн сайта был найден новый импульс в последние годы, с развивающейся техникой быстрота design.И не зря: по сути, отзывчивый веб-дизайн отдаляет нас от фиксированной ширины страницы мы привыкли, заменив их форма смены раскладки и интеллектуальных оплавлении содержания.Добавьте к этому вдумчиво стратегии контент и мобильные первый подход, и мы начинаем предлагать опыт, который адаптируется для различных устройств и браузеров, чтобы удовлетворить context.

Когда мы смотрим на широте веб-устройств, отзывчивые дизайн, несомненно, даст лучший пользовательский опыт.Горизонтальная прокрутка, панорамирование и масштабирование окна имеют свое место в дизайне пользовательского интерфейса, но заставлять пользователя делать все эти вещи для навигации веб-сайт быстро становится утомительным.Установка веб-сайта для просмотра это больше, чем просто макет: это также о resolution.В этой статье я покажу, почему SVG является прекрасным дополнением к будущему людей Web development.

Введение в SVG

SVG предлагает действительно зависят от разрешения Техника для представления графики в Интернете.SVG является формат векторной графики, которая использует XML определить основные свойства, такие как пути, формы, шрифты и цвета, и более продвинутых функций, таких как градиенты, фильтры, скриптов и анимации.Создайте файл один раз и использовать его в любом месте, в любом масштабе и resolution.

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

Case Study: CSS Sprites

Мы все знаем о технике CSS спрайтов.(Если этого не сделать, то есть быстро читать через article__27 Sven Lennartz ‘|. И Louis Lazaris пунктов своей плюсы и cons.) В приведенном ниже примере мы покажем, как легкоSVG заменяет нормальное растровых изображений.Если этот метод не для вас, можно, конечно, представить целый ряд аналогичных ситуаций, в которых использование SVG.

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

Я издевался на следующем примере:

Я буду первым, чтобы признать, что эта строка иконок не будет выигрывать награды за дизайн, но это будет достаточно для этой статьи!Давайте посмотрим на HTML:

<div class="actions">
   <a class="a-share" href="#">Share</a>
   <a class="a-print" href="#">Print</a>
   <a class="a-tag" href="#">Tag</a>
   <a class="a-delete" href="#">Delete</a>
</div>

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

.actions {
   display: block;
   overflow: auto;
}

.actions a {
   background-image: url('sprite.png');
   background-repeat: no-repeat;
   background-color: #ccc;
   border-radius: 5px;
   display: block;
   float: left;
   color: #444;
   font-size: 16px;
   font-weight: bold;
   line-height: 20px;
   text-decoration: none;
   text-shadow: 0 -1px 2px #fff;
   padding: 10px 20px 10px 40px;
   margin-right: 5px;
}

.a-share  { background-position: 10px 0; }
.a-print  { background-position: 10px -40px; }
.a-tag    { background-position: 10px -80px; }
.a-delete { background-position: 10px -120px; }

Примечание фиксированного размера пикселя и фона PNG, которые мы можем видеть ниже оформлена в полной славе производство Photoshop:

Эта реализация спрайтов CSS является основной, и на сегодняшний стандарт, это не хорошо!Как мы можем увеличить это?Во-первых, давайте рассмотрим следующие вопросы:

1. У нас rasterized изображение на очень ранней стадии.Даже в полном размере, иконы, в которых находятся между точками точек, таких, как один для “Печать”, есть blurred.
2. Если мы масштаба in, то изображение будет размываться или пикселизация даже больше, нет дополнительных данных для повторной визуализации изображения при больших sizes.
3. Все имеет фиксированной size, который является ни хорошим, отзывчивым для дизайна, ни хорошего доступности, потому что шрифт по умолчанию в браузере размер ignored.

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

1.Rasterization

Устройств, таких как современные смартфоны имеют очень высокую плотность пикселей, а некоторые уже превышают 300 пикселей на дюйм (PPI) отмечают, что считается пределом способность человеческого глаза различать мелкие детали.Пиксель не имеет реального эквивалента в размере, пока он сидит на экране фиксированной размерности (например, 3,5 дюйма по диагонали) и фиксированное разрешение (например, 640 × 960 пикселей).В этом масштабе текста с размером шрифта 16 пикселей будет невероятно мала, чтобы глаза.По этой причине, устройства просто не могут перевести 1 CSS пиксель до 1 пикселя устройства, вместо этого они удвоиться.Таким образом, 16-пиксель размер шрифта на самом деле занимает более 32 пикселей, когда rendered.

То же относится и к изображениям, но они уже растеризованные, так что удвоение пикселов имеет никакой пользы.В нашем примере, каждая икона была растеризованные около 25 × 25пикселов (всего спрайта составляет 30 × 160), поэтому они не могут воспользоваться двойной пикселей ratio.Одним из решений является использование CSS СМИ queries обнаружить пиксела.Это уже реализовано в Webkit и Gecko основе browsers.

Для улучшения нашего примера, мы можем добавить следующее объявление CSS:

@media only screen and (-webkit-min-device-pixel-ratio: 2)  {
   .actions a {
      background-image: url('sprite@2x.png');
      background-size: 30px 160px;
   }
}

Альтернативные фоновое изображение поставляется в коде выше была сохранена на уровне 60 × 320 пикселов (т.е. в два раза исходные размеры).background-size свойство сообщает CSS относиться к нему меньше.Примечательно, что теперь устройство имеет дополнительные данные, чтобы сделать лучшее изображение (если могут)

Это решение не плохо, но это не решает проблемы мы столкнулись в пунктах 2 и 3 ниже.Он также требует, чтобы мы сохранили несколько файлов увеличении размера: потенциальную нагрузку на пропускную способность и реальная стычка.Для не-векторных изображений, таких как фотографии в формате JPG, мы не можем сделать гораздо больше, чем that.

2.Zooming

На их размер по умолчанию, наш растеризованные иконки выглядят приемлемыми, по крайней мере на низкой плотностью пикселей экрана.Однако, если пользователь увеличить на веб-странице, эти маленькие прелести UI будет деградировать очень quickly.

Трансфокация совместных действий, когда пользователи находят сайт слишком мал для комфортного просмотра.Или, говоря другими словами, веб-сайты, которые предназначены слишком мал очень распространены.Существует действительно нет “идеальный” размер, потому что почти каждый имеет по крайней мере некоторый уровень нарушения зрения, так как наши глаза неизбежно ухудшается с возрастом.Во-вторых, с быстрым ростом устройства сенсорный экран, пинч-на-зум стал стандартным способом для увеличения фиксированного размера содержанию предназначены для больших экранов (то есть большую часть сегодняшней Web)

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

3.Исправлена ​​Sizes

Представление элементов страницы при фиксированных размерах заставляет многих пользователей, чтобы увеличить, но это также отключает очень полезная функция браузера.Пользователи могут установить предпочитаемый размер шрифта (по умолчанию в браузерах составляет 16 пикселов).По размерам все в пикселях, мы изменить эту настройку.Размеры элементов на основе этого по умолчанию гораздо лучше, так что, если текст большой, все регулируется, чтобы соответствовать.Это по существу имитирует эффект масштабирования, но не происходит без того, чтобы пользователь вручную делать это при каждом посещении.ИтанМаркотт написал большую статью, что объясняется относительной шрифта sizes.

Давайте повторно реализовать наш спрайт например, с решением этих трех issues.

Масштабируемая Implementation

Вот HTML снова.Нам не нужно ничего менять here.

<div class="actions">
   <a class="a-share" href="#">Share</a>
   <a class="a-print" href="#">Print</a>
   <a class="a-tag" href="#">Tag</a>
   <a class="a-delete" href="#">Delete</a>
</div>

Обновляются CSS, где происходит волшебство:

body { font-size: 100%; }

.actions {
   display: block;
   overflow: auto;
}

.actions a {
   font-size: 1em;
   line-height: 1.25em;
   padding: 0.625em 1.25em 0.625em 2.5em;
   margin-right: 0.3125em;
   border-radius: 0.3125em;
   background-image: url('sprite.svg');
   -webkit-background-size: 1.875em 10em;
   -o-background-size: 1.875em 10em;
   -moz-background-size: 1.875em 10em;
   background-size: 1.875em 10em;
   /* styles carried over from the original implementation */
   background-repeat: no-repeat;
   background-color: #ccc;
   color: #444;
   display: block;
   float: left;
   text-decoration: none;
   text-shadow: 0 -1px 2px #fff;
}

.actions-em .a-share { background-position: 0.625em 0; }
.actions-em .a-print { background-position: 0.625em -2.5em;  }
.actions-em .a-tag { background-position: 0.625em -5.0em;  }
.actions-em .a-delete { background-position: 0.625em -7.5em;  }

В этой версии мы сделали следующие изменения:

• background-image Сейчас SVG file.
• Все размеры на основе умолчанию 16 пикселей, или 1 ет.Если пользователя по умолчанию, больше или меньше, то все будет масштабироваться относительно.(Если у вас несколько каждого размера ет на 16, вы получите число пикселов, используемых в нашей начальной фиксированный размер пример).
• background-size Очень important.При установке этого в ет единиц, мы говорим браузеру, чтобы масштабировать спрайт относительно всего остального.Вы заметите, что 1,875 × 10 EM умноженное на 16 становится 30 × 160 — базовый размер, на котором мы произвели спрайт, в pixels.
• background-position каждого sprited значок также основана на относительной units.

Сейчас на которые мы используем SVG и относительные разм …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров