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

Как создать логотип, который отвечает своему соотношению сторон

В Интернете довольно много статей, посвященных адаптивным логотипам. Самым популярным примером может быть веб-сайт Responsive Logos, который показывает несколько очень известных логотипов в разных вариациях для разных размеров экрана. Когда я впервые увидел этот пример, я подумал, что это не более чем уловка. В конце концов, это просто

с большим спрайтом изображения в качестве фона. Только когда я услышал выступление @MikeRiethmuller на конференции Smashing Conference под названием: Beyond Media Queries, я больше заинтересовался этой темой. В дополнение к разговору, я настоятельно рекомендую прочитать его статью «У SVG больше возможностей».

Я узнал две вещи, которые действительно взволновали меня.

  1. При использовании SVG вы можете удалить атрибут viewBox и установить новую систему координат для вложенных элементов SVG-символов, применив новый viewBox. (Да, я знаю. Звучит запутанно. Ниже я объясню более подробно.)
  2. Когда вы используете медиа-запросы внутри файлов SVG, а затем вставляете изображение с помощью img-тега или в качестве фонового изображения CSS, медиа-запросы привязываются к ширине изображения. Практически такое же поведение, как если бы вы использовали запросы контейнера.

Идея родилась

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

Конечный результат

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

Шаг за шагом (… эээ, детка ♬)

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

1. Разработка логотипа

Давайте начнем с разработки четырех версий нашего логотипа. Мой инструмент выбора для этого - Sketch.

Варианты логотипа: 1. Небоскреб - 2. Портрет - 3. Площадь - 4. Пейзаж

Когда есть элементы, которые можно найти в нескольких версиях, я рекомендую использовать символы в Sketch. Это поможет вам в будущем, и SVG, который мы собираемся создать, будет использовать те же символы. (Если вы не знакомы с символами в Sketch, я настоятельно рекомендую эту «Среднюю историю» Джона Мура.)

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

2. Настройка файла SVG

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

Если вы посмотрите на атрибуты, вы заметите, что атрибут viewBox отсутствует. Мы только устанавливаем ширину и высоту на 100%.

(Примечание: присутствуют также два атрибута xmlns. Если честно, я не знаю точно, почему они должны быть там, я, вероятно, должен гуглить… в любом случае, если вы удалите их, вы не сможете использовать какие-либо символы внутри SVG и получите вместо этого некрасивые сообщения об ошибках.)

3. Экспорт SVG-символов

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

Поместите все символы на отдельные монтажные области, прежде чем экспортировать их как SVG

Крайне важно, чтобы вы не экспортировали объекты, а всегда создавали новый артборд. Если вы экспортируете элементы из большого артборда, вы получите странные атрибуты преобразования, прикрепленные к вашим группам. Это также помогает отсоединить все символы и удалить все неиспользуемые группы. Наконец, сделайте правильное именование и посмотрите, применяется ли какая-либо маска, которая не используется.

Теперь давайте посмотрим, как выглядит экспортированный код:

Я бы порекомендовал использовать что-то вроде SVGOMG, чтобы уменьшить размер файла и удалить все ненужные вещи. Но не чистите удостоверения личности. Если вы назвали свои слои в Sketch, вы можете легче идентифицировать их по идентификатору в конечном файле. Вот как будет выглядеть ваш оптимизированный файл:

Если все правильно, вы увидите группу с именем вашего артборда в качестве ID. Внутри этой группы есть контент, который представляет интерес. В данном случае это прямоугольник, служащий фоном, и сложный путь, из которого строится IX (римлянин 9 поворачивается против часовой стрелки на 90 градусов ... на всякий случай, если вы об этом просите).

4. Построение символов

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


  
    
  
  
    
  

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

5. Используя наши символы

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

<используйте xlink: href = ”# ix” x = ”0” y = ”0” width = ”100” height = ”100” />

Теперь посмотрим, что именно здесь происходит.

Сначала xlink: href указывает на символ с уникальным идентификатором и отрисовывает его содержимое… ну, на самом деле он не рендерится, а клонируется, и неожиданно появляется странная вещь под названием Shadow DOM. Это может звучать как что-то из «Чужих вещей», но вам не нужно бояться. Пока вы не хотите ничего менять внутри экземпляра символа с помощью CSS, вам не о чем беспокоиться.

Далее у нас есть атрибуты x, y, width и height. Возможно, вы уже догадались, что эти атрибуты определяют положение и размеры отображаемого символа. Но здесь не дано ни единой единицы измерения, поэтому насколько большим будет наш символ? Внутри SVG единицы определяются атрибутом viewBox, установленным в теге SVG. Поскольку мы не устанавливали viewBox и определяли только ширину и высоту (100%), одна единица соответствует одному пикселю, и наш символ будет иметь ширину 100 пикселей. И это не имеет значения, если вы измените ширину SVG. Он всегда будет оставаться на ширине 100 пикселей.

Попробуйте изменить атрибуты ширины и высоты внутри этого CodePen. Вы заметите, что символ всегда будет сохранять пропорции. К счастью, это именно то, что нам нужно для нашего логотипа. Если вы хотите изменить поведение при изменении размера, вам нужен атрибут с именем preserveAspectRatio. Прочтите статью @ SaraSoueidan о понимании систем координат SVG и трансформации, если вы хотите узнать больше об этом.

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

<используйте xlink: href = ”# ix” x = ”5%” y = ”5%” width = ”90%” height = ”90%” />

(Возможно, вы считаете, что установка ширины или высоты на «auto» - хорошая идея… ну, это не так. Safari и Firefox просто игнорируют это, в то время как Chrome ничего не отображает.)

6. Объединение символов внутри нового символа

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

Портрет-версия: Фиолетовый: viewBox - Красный: Положение - Бирюзовый: Ширина и высота

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

<символ id = ”портрет” viewBox = ”0 0 160 180">
  <используйте xlink: href = ”# ix” x = ”40” y = ”32” width = ”80” height = ”80” />
  <используйте xlink: href = ”# typo” x = ”3” y = ”130” width = ”154” height = ”16” /> 

Когда мы используем этот символ, мы не хотим, чтобы он был на 100% ширины, поэтому давайте просто уменьшим его, как наш квадратный символ.

<используйте xlink: href = ”# портрет” x = ”5%” y = ”5%” width = ”90%” height = ”90%” />

7. Скрыть и показать

До этого момента мы создали три символа и в нашем SVG было два тега использования.

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


<используйте класс = "портрет" xlink: href = ”# портрет” x = ”5%” y = ”5%” width = ”90%” height = ”90%” />

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