Отличный пример создания parallax scrolling с помощью Stellar.js. Оригинал статьи размещен здесь - An Introduction to Parallax Scrolling Using Stellar.js.

Одним из наиболее обсуждаемых трендов в web-дизайне последние несколько лет является эффект

1
parallax scrolling
. Нравиться он вам или нет, но этот эффект сегодня применяется на очень многих сайтах. В этой статье будет дано краткое описание принципа
1
parallax scrolling
и будет показано, как применить этот эффект на странице с помощью jQuery-плагина под названием Stellar.js.

Что такое parallax scrolling

Основная идея parallax scrolling заключается в том, что при прокрутке страницы вниз фоновое изображение движется с меньшей скоростью, нежели содержимое страницы. Таким образом создается иллюзия 3D на странице. Этот эффект является прекрасным дополнением к web-странице, однако он становиться навязчивым при чрезмерном злоупотреблении им. Время от времени вы встречаете на просторах Сети сайты, перегруженные подобными эффектами. И вам не всегда может такое понравиться. Потому что в основном при реализации такого эффекта используется анимация фоновых изображений, что значительно увеличивает вес страницы, в результате чего она очень медленно загружается в браузере.

Примерами сайтов со злоупотреблением таких эффектов, на мой взгляд, могут послужить Saucony Kinavara 3 и Oakley Airbrake MX. Первый сайт “весит” 50Mb(!), второй сайт - около 20Mb.

Теперь, когда вы имеете представление о том, как на деле выглядит эффект parallax scrolling, давайте попробуем реализовать его с помощью плагина Stellar.js.

Что такое Stellar.js

Stellar.js - это jQuery-плагин, с помощью которого можно легко реализовать эффект parallax scrolling на web-странице. Несмотря на то, что этот плагин уже не поддерживается разработчиком, он все еще остается очень надежным, совместим с самыми последними версиями библиотеки jQuery и часто применяется web-разработчиками в проектах (что является показателем). Stellar.js в списке популярных плагинов The jQuery Plugin Registry находится на высших позициях, поэтому вы наверняка о нем слышали или же читали упоминание о нем.

Отлично, вкратце мы познакомились, что такое Stellar.js и можно приступать к процессу создания parallax scrolling на странице с его помощью.

Stellar.js - начинаем работу

Начать работать с плагином Stellar.js очень просто. Для начала нужно скачать этот плагин и подключить к странице. Получить плагин Stellar.js можно двумя способами - из Git-репозитория или с помощью менеджера пакетов Bower. Если остановится на использовании Bower, то в консоли нужно набрать такую команду:

bower install jquery.stellar

Когда плагин Stellar.js получен любым из вышеописанных способов, необходимо подключить его к странице как обычно.

После подключения плагина Stellar.js все готово для того, чтобы применить эффект

1
parallax scrolling
на странице. Этот плагин позволяет применить данный эффект к любому scrolling-элементу на странице, будь то объект
1
window
или любой другой. Для этого нужно выполнить выборку нужного элемента с помощью jQuery, а затем применить к выбранному элементу метод
1
stellar()
.

Самый простой пример применения плагина Stellar.js к объекту показан ниже:

$('#someElement').stellar();

Для объекта

1
window
можно использовать и более краткий синтаксис вышеприведенного примера:

$.stellar();

В этом коде производится поиск фоновых изображений или элементов, к которым применяется эффект

1
parallax
; и для этих элементов выполняется пересчет их расположения на web-странице при ее прокрутке.

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

1
parallax scrolling
, созданной с помощью Stellar.js, то можете посетить эту ссылку - Stellar.js Backgrounds Demo.

Настройки Stellar.js

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

Глобальные настройки передаются методу

1
stellar()
в качестве аргументов, в момент вызова этого метода. Специфичные для элемента настройки передаются в виде
1
data-*
-атрибутов. В этом разделе статьи я не буду подробно останавливаться на рассмотрении всех возможных параметров плагина Stellar.js. Если у вас возникнет желание детально ознакомиться с ними, то можно обратиться к разделу, посвященному этому вопросу - Configuring Everything.

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

1
parallax scrolling
является направление
1
parallax
по вертикали - сверху вниз или же наоборот. Однако, с помощью настроек можно задать parallax по горизонтали - слева направо и наоборот. И даже можно задать сразу два направления - по вертикали и по горизонтали. Для управления направлением
1
parallax
в плагине Stellar.js имеются два параметра Boolean-типа:

  • 1
    
    horizontalScrolling
    - для управления parallax по горизонтали
  • 1
    
    verticalScrolling
    - для управления parallax по вертикали

По умолчанию оба параметра имеют значение

1
true
.

Другим интересным параметров плагина Stellar.js является

1
responsive
. Данная настройка отвечается за возможность обновления содержимого блока с эффектом parallax при наступлении событий
1
load
и
1
resize
объекта
1
window
. Значением по умолчанию является
1
false
.

Последним (достойным внимания) глобальным параметром плагина Stellar.js является

1
hideDistantElements
. Значением по умолчанию этого параметра является
1
true
. Данный параметр отвечает за эффект скрытия объекта в том случае, когда он выходит на границы viewport. Если такое поведение вам не нужно, то можно поставить значение
1
hideDistantElements
в
1
false
.

Единственным специфичным для элемента параметром плагина Stellar.js, о котором я расскажу в этой статье, является

1
data-stellar-background-ratio
. Расскажу только потому, что он используется очень часто при работе с плагином Stellar.js. Параметр принимает в качестве значения положительное число и управляет скоростью parallax для выбранного элемента.

Например,

1
data-stellar-background-ratio="0.5"
означает, что скорость перемещения элемента при scrolling будет в два раза меньше обычной. Если вы будете использовать данный параметр со значением, меньшим 1, то, согласно документации, для элемента с parallax необходимо применить CSS-правило
1
background-attachment: fixed;
.

Теперь, когда мы познакомились с плагином Stellar.js и научились управлять им с помощью параметров, самое время посмотреть его в действии.

Demo

В этом разделе статьи мы создадим пример кода, в котором применим плагин Stellar.js и настроим его с помощью параметров, рассмотренных ранее. Первым делом нам понадобиться HTML-разметка. Для этого создадим шесть блоков

1
div
, внутри которых будет содержаться некоторый текст:

<div class="content" id="content1">
  <p>text here</p>
</div>
<div class="content" id="content2">
  <p>text here</p>
</div>
<div class="content" id="content3" data-stellar-background-ratio="0.5">
  <p>text here</p>
</div>
<div class="content" id="content4" data-stellar-background-ratio="0.5">
  <p>text here</p>
</div>
<div class="content" id="content5" data-stellar-background-ratio="0.5">
  <p>text here</p>
</div>
<div class="content" id="content6" data-stellar-background-ratio="0.5">
  <p>text here</p>
</div>

Для представленной выше HTML-разметки необходимо написать некоторые CSS-стили для задания фоновых изображений. В нашем примере будут использоваться три изображения, при этом каждое из них будет использоваться дважды. Так как к последним трем блокам

1
div
применен атрибут
1
data-stellar-background-ratio
, то в CSS-стилях также необходимо прописать правило
1
background-attachment: fixed;
.

Финальный вариант CSS-кода будет выглядеть таким образом:

@import "compass";
@import "compass/reset";

$white: #fff;
$black: #000;

body {
  font-size: 20px;
  color: $white;
  text-shadow: 0 1px 0 $black, 0 0 5px $black;
}

p {
  padding: 0 .5em;
  margin: 0;
}

.content {
  background-attachment: fixed;
  height: 400px;
  line-height: 400px;
  text-align: center;
}

#content1 {
  background-image: url("http://www.tamperlock.com/blog/wp-content/uploads/2014/08/london-england.jpg");
}

#content2 {
  background-image: url("http://ocdn.eu/images/pulscms/ZjU7MDQsMCwzMiwzODQsMWZhOzA2LDMyMCwxYzI_/1eb29a70dabd0994cdefaad01ca3c884.jpg");
}

#content3 {
  background-image: url("http://www.zeus.aegee.org/magazine/wp-content/uploads/napoli-golfo-vesuvio.jpg");
}

#content4 {
  background-image: url("http://www.tamperlock.com/blog/wp-content/uploads/2014/08/london-england.jpg");
}

#content5 {
  background-image: url("http://ocdn.eu/images/pulscms/ZjU7MDQsMCwzMiwzODQsMWZhOzA2LDMyMCwxYzI_/1eb29a70dabd0994cdefaad01ca3c884.jpg");
}

#content6 {
  background-image: url("http://www.zeus.aegee.org/magazine/wp-content/uploads/napoli-golfo-vesuvio.jpg");
}

Последний шаг, который нужно выполнить, это запустить эффект, вызвав метод

1
stellar()
. Этому методу также передадим несколько аргументов:

$.stellar({
  horizontalScrolling: false,
  responsive: true
});

Stellar.js - parallax scrolling with jQuery

Заключение

В данной статье был рассмотрен плагин Stellar.js для создания эффекта parallax на web-странице. Мною не были рассмотрены все настройки и возможности этого плагина. Но целью этой статьи было заинтересовать читателей плагином Stellar.js для того, чтобы продолжить его изучение самостоятельно.

Что вы думаете о плагине Stellar.js? Вы слышали о таком или же используете его давно?

Краткая статья, посвященная тому же вопросу - как реализовать кросс-браузерную поддержку SVG в браузерах.

В предыдущей статье “SVG fallback с помощью PNG” было показано четыре очень интересных способа реализации такой задачи. В этой статье будут показаны также несколько способов решения, но уже с помощью библиотеки jQuery .

В начале статьи автор рассказывает о преимуществах использования формата графики SVG. Думаю, что многие уже устали читать деферамбы о пользе SVG. Мне, как переводчику, тем более надоело переводить всю эту “воду”, поэтому смело ее опускаю и перехожу к главному.

jQuery и Modernizr

Для реализации этого способа понадобиться библиотека Modernizr. Код реализации должен выглядеть таким образом:

if (Modernizr.svg) {
  // Supports SVG
} else {
  // Doesn't support SVG (Fallback)
}

Если Modernizr обнаружит, что пользовательский браузер не поддерживает SVG, то запуститься простой jQuery-скрипт, который произведет замену расширения

1
svg
на
1
png
у всех файлов-изображений:

if (!Modernizr.svg) {
  $('img[src*="svg"]').attr('src', function() {
    return $(this).attr('src').replace('.svg', '.png');
  });
}

Данный способ имет точно такие же ограничения, что и скрипт из предыдущей статьи - “SVG fallback с помощью PNG”. То есть, нужно иметь два комплекта файлов - один в SVG-формате, другой в PNG-формате. Имена файлов должны быть идентичными.

SVGMagic - плагин под jQuery

SVGMagic - это простой плагин под библиотеку jQuery, который отыскивает в HTML-документе все SVG-изображения (в том числе и фоновые SVG-изображения). А затем им создаются PNG-копии всех найденных SVG-изображений, если браузер пользователя не поддерживает SVG.

Для работы с плагином SVGMagic достаточно установить его в проект и запустить инициализацию через jQuery:

$(document).ready(function(){
  $('img').svgmagic();
});

Работа плагина SVGMagic строится следующим образом. Проверяется возможность браузером пользователя отображения SVG-изображений. Если такой поддержки нет, то плагин выполняет полную проверку всего HTML-документа и собирает коллекцию всех URL на SVG-файлы, размещенные внутри этого документа.

Затем эта коллекция URL отправляется на сервер плагина. Сервер производит скачивание всех SVG-изображений по этим URL. Затем производиться конвертирование SVG в PNG.

На страницу клиента отправляется новая коллекция URL, которые теперь указывают на файлы формата PNG. Браузер посетителя загружает по этим ссылкам новые PNG-файлы и внешний вид страницы не нарушается.

SVGeezy - еще один плагин jQuery

SVGeezy является fallback-плагином в полном смысле этого слова. Плагин проверяет поддержку SVG в браузере пользователя. Если таковой нет, то выполняется замена значения в атрибуте

1
src
на то, в котором указывается на путь PNG-файла.

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

svgeezy.init(false, 'png');

Первый параметр плагина SVGeezy “говорит” ему - не выполнять или выполнять проверку. Если необходима проверка плагином SVGeezy браузера и замена изображений, то нужно оставить значение в

1
false
. Этот параметр может понадобиться в случае, когда нет необходимости в работе плагина на каких-то страницах.

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

Например, файл по пути

1
/images/logo.svg
будет заменен файлом по пути
1
/images/logo.png
.

На этом самая интересная часть статьи “How to fallback to PNG if SVG not supported?” завершается. Как лично мне кажется, в данной статье заслуживают внимания только первый и последний способы реализации SVG fallback.

На этом все.


Примечание переводчика: статья просто отличная и написана мастером своего дела Nick.

Немного лирики “для тех, кто в танке” - fallback можно в данном контексте перевести как - “откат”. То есть, если браузер по каким-то причинам не поддерживает SVG, то на web-странице выполняется “откат” - SVG-изображения заменяются на PNG-изображения.

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

Далее - текст автора по имени Nick (в вольном переводе).

В следующих четырех сниппетах я рассмотрю применение метода SVG fallback c помощью PNG-изображений четырьмя различными способами. Все четыре способа направлены на одну цель - обеспечение кросс-браузерной поддержки SVG на web-странице.

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

Ниже показаны сниппеты, которые тремя различными путями осуществляют применение SVG, а также SVG fallback к изображениям формата PNG, если браузер не поддерживает SVG.

Что мы будем рассматривать:

  • SVG в качестве фонового изображения,
    1
    
    fallback
    с помощью Modernizr
  • SVG в качестве фонового изображения,
    1
    
    fallback
    с помощью CSS
  • SVG в качестве встраиваемого изображения (тег
    1
    
    img
    ), onerror fallback
  • SVG в качестве встраиваемого изображения (тег
    1
    
    img
    ), , fallback с помощью Modernizr

Modernizr является прекрасным инструментом для определения возможностей браузера. Она автоматически добавляет ко всем HTML-элементам в DOM классы в зависимости от того, поддерживает браузер ту или иную возможность или нет. В нашем случае, Modernizr будет добавлять класс

1
svg
или
1
no-svg
для всех элементов в DOM в зависимости от того, поддерживает ли браузер SVG.

SVG в качестве фонового изображения, fallback с помощью Modernizr

Используя Modernizr, мы отпеределяем, поддерживает браузер SVG или нет. Если SVG используется в качестве фонового изображения, то тогда проще сохранить изображения для страницы в двух верысиях - SVG и PNG (прим. переводчика: например, IcoMoon умеет так делать). В таблице стилей CSS тогда нужно добавить дополнительный класс. При таком подходе исключается двойная загрузка файлов (SVG и PNG), так как класса

1
no-svg
просто не существует в DOM, если браузер поддерживает SVG, и наоборот.

.tomato {
  background-image: url('img/tomato.svg');
}
.no-svg .tomato {
  background-image: url('img/tomato.png');
}

SVG в качестве фонового изображения, fallback с помощью CSS

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

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

.tomato {
  background: url('img/tomato.png');
  background-image: url('img/tomato.svg'), none;
}

SVG в качестве встраиваемого изображения (тег img), onerror fallback

Для этого метода необходимо редактирование HTML-кода. Основан метод на использовании Javascript-функции

1
onerror
, которая встраивается внутрь HTML-тега
1
<img>
. Благодаря этой функции осуществляется откат (fallback), если браузер не смог загрузить изображение по пути, указанному в атрибуте
1
src
.

Однако, с етим методом нужно быть осторожным. Если отката (fallback) не произойдет, то некоторые браузеры могут “зависнуть” в бесконечном цикле. Это явно не хорошо.

<img src="tomato.svg" onerror="this.src='tomato.png'" />

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

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

Зависания браузера в бесконечном цикле можно избежать благодаря небольшой поправке, которую подсказал Roy Reed:

<img src="tomato.svg" onerror="this.src='tomato.png'; this.onerror=null;" />

SVG в качестве встраиваемого изображения (тег img), fallback с помощью Modernizr

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

Если браузер поддерживает SVG, то строку с тегом

1
img
отставляем “как есть”:

<img src="tomato.svg" />

Если же браузер пользователя не поддерживает SVG, то запускается мальнький скрипт, который отыскивает в DOM все img-элементы с атрибутом

1
src="*.svg"
и производит у файлов-изображений замену расширения с
1
svg
на
1
png
.

Чтобы метод сработал, необходимо иметь две версии (SVG и PNG) одного файла; имена файлов должны быть идентичными.

Ниже показан HTML и Javascript. Чтобы пример сработал, убедитесь, что подключили библиотеку Modernizr:

<img src="tomato.svg" />
if(!Modernizr.svg) {
  var imgs = document.getElementsByTagName('img');
  var svgExtension = /.*\.svg$/
  var l = imgs.length;
  for(var i = 0; i < l; i++) {
    if(imgs[i].src.match(svgExtension)) {
      imgs[i].src = imgs[i].src.slice(0, -3) + 'png';
      console.log(imgs[i].src);
    }
  }
}

Заключение

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

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

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

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

Если открыть любой SVG-файл в редакторе кода, то можно увидеть SVG-код, на котором написан данный файл.

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

На этом все.


От переводчика. Привожу вольный перевод великолепной статьи “Styling And Animating SVGs With CSS” от Sara Soueidan.

Данная статья является одной из пяти в серии, посвященной формату SVG. Больше мне сказать нечего - читайте Сару.

CSS может использоваться для стилизации и анимации векторной графики точно также, как для стилизации и анимации HTML-элементов. В этой статье, которая является производной от моего недавнего выступления на конференциях CSSconf EU и From the Front, где я рассказывала о перспективах и приемах работы с форматом векторной графики SVG и возможностях ее стилизации при помощи CSS.

Я покажу, каким образом можно экспотировать и оптимизировать SVG-файлы, способы вставки этих файлов в web-документ, способы стилизации и анимации SVG-файлов, на практике применим стили и анимацию к SVG-файлам-примерам.

Введение

Масштабируемая векторная графика (SVG) представляет из себя векторные изображение для двухмерной графики (2D), в основе которой лежит формат XML. Подобная графика имеет поддержку интерактивности и анимации. Другими словами, SVG-файлы представляют из себя XML-теги, которые генерируют фигуры и изображения; к этим фигурам и изображениям могут быть применены стили и эффекты с помощью CSS точно также, как это делается с обычными HTML-элементами.

Анимация или интерактивность в SVG-файлах могут быть достигнута двумя способами - с помощью CSS или с помощью Javascript. В этой статье будет рассмотрен первый способ - как это сделать с помощью CSS.

Существует много причин, почему нужно делать выбор в пользу SVG и почему нужно использовать этот формат сегодня:

  • графика в формате SVG является масштабируемой и не зависящей от разрешения. Такая графика выглядит великолепно везде, будь то экраны с высоким разрешением Retina или же печатный вариант;
  • изображения имеют отличную поддержку браузеров. Создать
    1
    
    fallbacks
    для браузеров, не имеющих поддержки, очень легко и в этой статье будет показано, как это сделать.
  • поскольку файлы в своей основе являются текстом, то они хорошо поддаются архивации, что позволяет сделать их значительно меньше по размеру, чем файлы форматов JPEG или PNG.
  • файлы стилизуются и анимируются с помощью CSS или Javascript
  • файлы формата SVG имеют встроенную поддержку
    1
    
    clipping
    ,
    1
    
    masking
    ,
    1
    
    background blend modes
    и
    1
    
    filters
    . Эти возможности эквиваленты возможностям обычного графического редактора, такого как Photoshop.
  • к файлам можно получить доступ. Другими словами, к ним можно получить легкий доступ через DOM API, что делает их прекрасным инструментом для инфографики и визуализации данных. Это дает ему преимущество перед HTML5 Canvas, поскольку контент последнего недоступен. С другой стороны, можно легко инспектировать каждый элемент файла с помощью инспектора элементов браузера точно также, как это делается с обычными HTML-элементами. Помимо этого, файлы доступны для экранных устройств чтения, если это необходимо. В последней части этой статье будет более подробно рассмотрен вопрос доступности файлов.
  • существует достаточно инструментов для создания, редактирования и оптимизации файлов. Помимо этого, существуют инструменты для облегчения и ускорения работы с SVG-файлами, что позволяет значительно ускорить рабочий процесс. Эти инструменты также будут рассмотрены позже.

Экспортирование SVG из графических редакторов и их оптимизация

Из всех редакторов векторной графики имеется три самых популярных:

  1. Adobe Illustrator
  2. Inkscape
  3. Sketch

Adobe Illustrator - платное приложение от Adobe. Очень популярный редактор с прекрасным интерфейсом и множеством возможностей, что делает его любимым инструментом многих дизайнеров.

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

Sketch - это приложение только под Mac OS X. Оно также не бесплатное, но уже успело стать достаточно популярным и собрать свою группу поклонников. Обладает множеством инструментов и возможностей, что делает работу в этом редакторе быстрее и удобнее.

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

В этой статье я буду показывать экспортирование и оптимизацию SVG-файлов на примере редактора Adobe Illustrator. Этот процесс практически ничем не отличается от подобного в других редакторах. За исключением некоторых специфических настроек самого Illustrator, о чем будет упоминаться по ходу этой статьи.

Для экспортирования графики в SVG-формат в Illustrator нужно перейти в меню по пути “File” - “Save as”, а затем выбрать формат

1
.svg
из выпадающего списка форматов. Настройки в окне поменяются в соответствии с выбранным форматом
1
.svg
. Например, можно будет выбрать версию SVG; встраивать изображения в виде графики или же сохранить их отдельно, с созданием внешней ссылки на них; выбрать способ стилизации (с помощью презентационных аттрибутов или же при помощи CSS-стилей в элементе
1
style
).

Ниже показано изображение с окном экспорта SVG, в котором представлен наилучший набор настроек для сохранения файлов SVG для web:

Окно настроек экспорта SVG в Adobe Illustrator

Почему представленный выбор настроек является наилучшим, рассказано Michaël Chaize в прекрасной статье Export SVG for the Web With Illustrator CC.

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

Имеется несколько инструментов для оптимизации SVG-кода. Peter Collingridge создал online-инструмент SVG Editor, в котором можно как вставлять напрямую, так и загружать свои собственные SVG-файлы. Инструмент обладает многими возможностями по оптимизации - удалением вспомогательного кода, комментариев, пустых групп и так далее. Одной из интересных настроек является управление числом знаков после запятой для координат точек:

Окно настроек SVG Editor

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

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

Редактор SVG Editor является online-инструментом. Если вы предпочитаете offline инструмент, то попробуйте SVGO (O - сокращение от “оптимизатор”). Этот инструмент основан на Node.js, имеет простой и понятный drag-and-drop интерфейс. Если вам не нравиться использовать online-инструменты, то SVGO будет хорошей альтернативой.

Ниже представлено простое изображение формата “до и после”, иллюстрирующее процесс оптимизации SVG-файла в online-редакторе SVG Editor. Красным цветом выделены paths и наглядно показано, насколько эффективен процесс оптимизации в данном случае:

Оптимизация SVG в SVG Editor

Обратите внимание на размер исходного SVG-файла и размер его оптимизированной версии. Вне всяких сомнений, оптимизированная версия более удобочитаемая.

После оптимизации SVG-файлов они готовы для встраивания их на web-страницу, для дальнейшей стилизации и анимации с помощью CSS.

P.S.

На практике воспользовался обоими инструментами оптимизации SVG - SVG Editor и SVGO. Могу сказать по личному опыту, что SVGO обладает значительно лучшим коэффициентом оптимизации. К слову сказать, это отечественная разработка команды Yandex.


От переводчика. Данная статья является вольным переводом поста Creating Asymmetric Layouts With Susy автора Zell Liew.

Цель статьи - на простом примере показать, каким образом можно создавать ассиметричную разметку (asymmetric layout) с помощью Susy 2. Обзор ни в коей мере не является каким-либо пособием - это просто очень краткий экскурс по возможностям Susy 2 в области (asymmetric layout). Далее - вольный перевод с разрешения автора.


Когда я впервые услышал об ассиметричной разметке (asymmetric layout), на тот момент такую можно было сделать только с помощью фреймворка Singularity GS. Подобная разметка была чем-то невероятно крутым и я очень захотел сделать подобную же - с неравной шириной столбцов

1
columns
. Но на тот момент я был полностью доволен системой Susyone и мне очень не хотелось переключаться на другой инструмент.

Можете представить мой восторг, когда вышла новая версия Susy 2, в которой была включена поддержка ассиметричной разметки (asymmetric layout).

В этой статье я покажу, как просто можно создавать ассиметричную разметку (asymmetric layout) с помощью Susy 2.

Что мы будем делать

В этой статье мы будем создавать с помощью Susy простую fluid-разметку. В этой разметке есть две боковых панели и два вложенных блока-потомка внутри центрального блока с контентом:

Asymmetric Layout Basic Setup

Глобальные переменные Susy

Для того, чтобы использовать возможность создания ассиметричной разметки (asymmetric layout) в Susy, в ее глобальной переменной

1
$susy
нужно внести два параметра:
1
columns
и
1
output
. Параметр
1
columns
должен быть Sass-списком для того, чтобы можно было работать с ассиметричной разметкой (asymmetric layouts).

Sass-список является строкой значений, разделенных пробелом и выглядит он примерно таким образом:

$list : 1 2 3 2 1;

Внутри данного списка

1
$list
располагаются пять значений:
1
1
,
1
2
,
1
3
,
1
2
,
1
1
. Если поместить этот список в качестве параметра в глобальную переменную
1
$susy
, то в результате получим ассиметричную разметку (asymmetric layout), состоящую из пяти столбцов.

Также же необходимо добавить еще один параметр

1
output: isolate
:

$susy : (
  columns: 1 2 3 2 1,
  output: isolate
)

После установки этих параметров все готово для создания заметки с помощью Susy.

Создание ассиметричной разметки (asymmetric layout)

Как правило, первым важным шагом является добавление миксина

1
container
для блока-обертки. Помимо этого, в данном примере для блока-обертки добавим еще высоту на 100% viewport, так как внутри блока нет содержимого и иначе мы его просто не увидим:

.wrap {
  @include container(1140px);
  height: 100vh;
}

Asymmetric Layout

Прежде чем продолжить создание разметки, необходимо разобраться с еще одним вопросом.

Так как в глобальных настройках Susy используется параметр

1
output: isolate
, необходимо уточнить месторасположение каждой отдельной части разметки. Для этой цели нужно использовать параметр
1
$location
.

Параметр

1
$location
указывает месторасположение каждого отдельного
1
span
и может принимать следующие значения:

  • 1
    
    first
  • 1
    
    last
  • 1
    
    at <number>

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

1
first
. Если блок располагается последним, то для него нужно использовать слово
1
last
. Если же блок располагается в разметке, к примеру, начиная со 2-го столбца, то в миксине
1
span
нужно использовать ключевое слово
1
at 2
.

Теперь, обладая всеми этими знаниями, можно создать разметку для трех блоков:

1
.sidebar-one
,
1
.content
и
1
.sidebar-two
.

Блок

1
.sidebar-one
по нашей схеме располагается первым и занимает ширину в один столбец:

.sidebar-one {
  @include span(1 first);
}

Блок

1
.sidebar-two
является последним в схеме разметки и также занимает ширину в один столбец:

.sidebar-two {
  @include span(1 last);
}

Блок

1
.content
имеет ширину в три столбца и начинается со второго столбца:

.content {
  @include span(3 at 2);
}

Теперь все три блока должны точно расположиться в создаваемой нами ассиметричной разметке (asymmetric layout). Два оставшися блока

1
.nest-one
и
1
.nest-two
временно опустим для более ясной картины:

Созданная Asymmetric Layout

Создание разметки для вложенных блоков

1
.nest-one
и
1
.nest-two
немного сложнее, нежели для основных блоков разметки. Имеется ввиду, что при разметке блоков-потомков необходимо учитывать факт их вложенности.

Оба наших блока расположены внутри блока

1
.content
, а мы знаем, что данный блок имеет структуру (2 3 2), которая также является ассиметричной разметкой (asymmetric layout).

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

1
span
.

Блок с классом

1
.nest-one
является первым блоком в разметке и занимает ширину в один (1) столбец ассиметричной сетки (asymmetric layout). Блок с классом
1
.nest-two
является последним блоком в разметке и занимает ширину в два (2) столбца.

Такая разметка создается с помощью следующего кода:

.nest-one{
  @include span(1 of (2 3 2) first);
}
.nest-two{
  @include span(2 of (2 3 2) last);
}

Как видим по исходному коду, при создании разметки нет необходимости указывать точную ширину (px,%) каждого блока. Благодаря Susy создание ассиметричной разметки (asymmetric layout) выполняется просто, с применением той теории, о которой только что говорилось. Достаточно только указать число столбцов, которое должен занимать каждый блок.

Более сложный пример разметки

Пример ассиметричной разметки, представленный в этой статье, достаточно простой. Более сложным случаем является создание адаптивной ассиметричной разметки (asymmetric layout).

В качестве примера могу привести образец ассиметричной разметки, созданной Nathan Ford с применением приложения GridsetApp. Этот образец является хорошим примером адаптивной страницы, которая дает представление о том, что может Susy.

Примечание переводчика: на этом самое существенное и интересное в этой статье заканчивается. Дальше идет реклама книги автора. Собственно, данная статья для этого и писалась, конечно. Но ради даже такого простого примера ассиметричной разметки (asymmetric layout) на Susy стоило превести этот пост.