Изграждане на отзивчив образ

Как да създадете лого, което отговаря на собственото му съотношение

В мрежата има доста статии, които се занимават с отзивчиви лога. Най-популярният пример може да бъде уебсайтът Respovable Logos, който показва някои много добре познати лога в различни вариации за различни размери на екрана. Когато за пръв път видях този пример, реших, че не е много повече от малко трикове. В крайна сметка това е просто

с спрайт с голям образ като фон. Едва когато чух разговор на Smashing Conference от @MikeRiethmuller, озаглавен: Beyond Media Queries, се заинтересувах повече от тази тема. В допълнение към беседата, горещо препоръчвам да прочетете статията му „SVG има повече потенциал“.

Има две неща, които научих, че наистина ме развълнуваха.

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

Идеята се роди

След като прочетох за всичко това, получих идеята да създам файл с лого за нашата компания, който не само реагира на ширината на браузъра, но вместо това се адаптира, като спазва съотношението му. Така че можете да го използвате навсякъде, а самият файл избира коя версия да покаже в зависимост от размера, който е даден.

Крайният резултат

Ако вече сте развълнувани, изтеглете окончателния DEMO FILE или го видите в действие в този CodePen.

Стъпка по стъпка (... uuh Бебе ♬)

По-нататък ще ви преведа през всяка стъпка, която трябва да извършите, за да създадете собствено отзивчиво лого. Трябва поне да имате основни познания за SVG, а също и за CSS. Но добрата новина е: изобщо няма да има JavaScript. В по-голямата си част просто трябва да копираме код от един файл в друг.

1. Проектиране на логото

Нека започнем с проектирането на четири версии на нашето лого. Моят инструмент за избор за това е Sketch.

Вариации на логото: 1. небостъргач - 2. портрет - 3. площад - 4. пейзаж

Винаги, когато има елементи, които могат да бъдат намерени в множество версии, препоръчвам да използвате символи в Sketch. Това ще ви улесни в бъдеще и SVG, който ще изградим, ще използва същите символи. (Ако не сте запознати със символи в Sketch, горещо препоръчвам тази медийна история от Джон Мур.)

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

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

Преди да експортираме някакви изображения, трябва да създадем нов SVG файл. Може би е малко плашещо да започнете SVG с код за писане, но в крайна сметка не е твърде сложно. Pinky обещание. Всичко, от което се нуждаем, е отварящ и затварящ маркер като този:

Ако погледнете атрибутите, ще забележите, че няма атрибут viewBox. Задаваме само ширина и височина на 100%.

(Забележка: Присъстват и два xmlns атрибута. За да бъда честен, аз не знам точно защо те трябва да са там, вероятно бих го google ... така или иначе, ако ги изтриете, няма да можете да използвате никакви символи в SVG и вместо това получите някои грозни съобщения за грешка.)

3. Експортиране на SVG-символи

Тъй като ще използваме и двата елемента като символи в окончателния SVG, трябва да поставим всеки от тях в един ред и да ги експортираме като SVG.

Поставете всички символи на отделни дъски, преди да ги експортирате като SVG

От съществено значение е да не експортирате обектите, а винаги да създавате нов артборд. Ако експортирате елементи от по-голям артборд, ще се окажете със странно изглеждащи атрибути за трансформация, прикрепени към вашите групи. Освен това помага да се отделят всички символи и да се изтрият всички неизползвани групи. Накрая направете правилно именуване и вижте дали е приложена някаква маска, която не се използва.

Сега нека да видим как изглежда експортираният код:

Препоръчвам да използвате нещо като SVGOMG, за да намалите размера на файла и да изтриете всички ненужни неща. Но не почиствайте лични документи. Ако сте кръстили слоевете си в Sketch, можете да ги идентифицирате по-лесно по идентификатор в крайния файл. Ето как ще изглежда вашият оптимизиран файл:

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

4. Изграждане на символите

Всички наши файлове са готови и могат да бъдат събрани заедно. Започнете, като напишете някои символни маркери във вашия окончателен файл и дайте на всеки уникален идентификатор, както и атрибут viewBox, който съответства на viewBox на експортираните файлове.


  <символ id = ”ix” viewBox = ”0 0 160 160”>
    
  
  <символ id = "типография" viewBox = "0 0 144 16">
    
  

И накрая, поставете съдържанието на вашите експортирани файлове (всичко в групата, което е кръстено като вашия артборд) в символните маркери. След като приключите с това, вашият файл трябва да изглежда така:

5. Използване на нашите символи

Дотук добре. За съжаление, ако отворите файла в браузър, няма да видите нищо. Засега дефинирахме нашите символи, но никога не ги поставяхме никъде. За да вмъкнете символ, трябва да използвате маркер за употреба във вашия файл:

<използвайте xlink: href = "# ix" x = "0" y = "0" width = "100" височина = "100" />

Сега нека да видим какво точно се случва тук.

Първо xlink: href сочи символ с уникален идентификатор и ще предаде съдържанието му ... е, не е рендерирано наистина, но клонирано и изведнъж се появява странно нещо, наречено Shadow DOM. Може да звучи като нещо от „По-странни неща“, но не е нужно да се страхувате. Докато не искате да променяте нищо в инстанцията на символа чрез CSS, няма за какво да се притеснявате.

След това имаме атрибутите x, y, ширина и височина. Вероятно вече сте се досетили, че тези атрибути определят позицията и размерите на изобразения символ. Но не е дадена единица, така че колко голям ще бъде нашият символ? Вътре в SVG единиците се определят от атрибута viewBox, зададен в SVG тага. Тъй като не зададохме viewBox и само дефинирахме ширина и височина (100%), една единица съвпада с един пиксел и нашият символ ще има ширина 100px. И няма значение дали промените ширината на SVG. Винаги ще стои на 100px ширина.

Опитайте да промените атрибутите за ширина и височина вътре в този CodePen. Ще забележите, че символът винаги ще запази своето съотношение. За щастие това е точно това, от което се нуждаем за нашето лого. Ако искате да промените поведението на оразмеряване, се нуждаете от атрибут, наречен saveAspectRatio. Вижте статията на @ SaraSoueidan относно разбирането на SVG координатни системи и трансформация, ако искате да научите повече за това.

Освен безразделните стойности, можете също да използвате проценти, за да определите позицията и размерите чрез атрибутите. За да направите този символ да изглежда като квадратната версия, просто използвайте ширина от 90% и поставете горния му ляв ъгъл на 5% от ограничаващото поле на изображението:

<използвайте xlink: href = "# ix" x = "5%" y = "5%" width = "90%" височина = "90%" />

(Може би смятате, че задаването на ширина или височина на „автоматично“ е добра идея… е, не е. Safari и Firefox просто го игнорират, докато Chrome няма да направи нищо.)

6. Комбиниране на символи в нов символ

За портретната версия ще ни трябват и двата символа. За да сме сигурни, че те мащабни пропорционално и винаги имат еднакво разстояние до границата и един до друг, ние просто създаваме още един символ. Този символ отново има свой атрибут viewBox, който ни позволява да поставим символите си в новата координатна система. За да видите къде точно трябва да се постави всичко, можете просто да се върнете към вашия файл със скици и да проверите размерите и разстоянията.

Портрет-версия: Лилав: viewBox - Червен: Позиция - Тюркоаз: Ширина и височина

Сега остава само да преведем всички числа към нашия нов SVG символ, който след това ще изглежда така:

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

Когато използваме този символ, не бихме го искали със 100% ширина, така че нека просто го мащабираме като нашия квадратен символ.

<използвайте xlink: href = "# портрет" x = "5%" y = "5%" width = "90%" височина = "90%" />

7. Скрий се и покажи

До този момент създадохме три символа и имаме два маркера за употреба в SVG.

Накрая започва забавната част и можем да я направим отзивчива. В момента и двата символа са изобразени един върху друг. За да скрием частите, които не искаме да показваме, трябва да добавим някои класове към маркерите за употреба.


Сега единственото, което липсва, е някои CSS, които да показват само една версия на логото наведнъж. Можете да добавите