Construirea unei imagini receptive

Cum se creează un logo care să răspundă propriului raport de aspect

Există destul de multe articole pe web care tratează logo-uri responsive. Cel mai popular exemplu ar putea fi site-ul web Logos Responsive care prezintă câteva logo-uri foarte cunoscute în diferite variații pentru dimensiuni de ecran diferite. Când am văzut acest exemplu pentru prima dată, m-am gândit că nu este mult mai mult decât un mic truc. În final, este doar

cu un sprite de imagine mare ca fundal. Abia când am auzit o discuție la Smashing Conference de @MikeRiethmuller, intitulată: Dincolo de interogări media, m-am interesat mai mult de acest subiect. În plus față de discuție, recomand foarte mult să citiți articolul său „SVG are mai mult potențial”.

Am învățat două lucruri care m-au emoționat cu adevărat.

  1. Când utilizați SVG, puteți renunța la atributul viewBox și puteți stabili un nou sistem de coordonate pe elementele cu simbol SVG cuibărit, aplicând un nou viewBox. (Da, știu. Pare confuz. Mai jos, o să explic mai detaliat.)
  2. Când utilizați interogări media în fișierele SVG și apoi inserați imaginea prin img-tag sau ca imagine de fundal CSS, interogările media sunt legate de lățimea imaginii. Aproape același comportament ca și cum ai utiliza interogări de conținut.

Ideea s-a născut

După ce am citit despre toate acestea, mi-a venit ideea de a construi un fișier logo pentru compania noastră, care nu numai că reacționează la lățimea browserului, ci se adaptează în același timp, respectând raportul său de aspect. Așadar, îl puteți folosi oriunde, iar fișierul însuși alege ce versiune să arate în funcție de dimensiunea acordată.

Rezultatul final

Dacă sunteți deja încântat, descărcați fișierul final DEMO sau vedeți-l în acțiune în acest CodePen.

Pas cu pas (... uuh Baby ♬)

În cele ce urmează, vă voi parcurge fiecare etapă pe care trebuie să o efectuați pentru a construi propriul dvs. logo responsiv. Cel puțin ar trebui să aveți câteva cunoștințe de bază despre SVG și CSS. Dar veștile bune sunt: ​​nu va fi deloc JavaScript. În cea mai mare parte, trebuie doar să copiem codul de la un fișier la altul.

1. Proiectarea logo-ului

Să începem prin proiectarea a patru versiuni ale logo-ului nostru. Instrumentul meu de alegere pentru asta este Sketch.

Variante logo: 1. Zgârie-nori - 2. Portret - 3. Pătrat - 4. Peisaj

Ori de câte ori există elemente, care pot fi găsite pe mai multe versiuni, recomand să utilizați simboluri în Sketch. Acest lucru vă va ușura în viitor, iar SVG-ul pe care îl vom construi va folosi aceleași simboluri. (Dacă nu sunteți familiarizat cu simbolurile din Sketch, vă recomand cu mare drag această poveste medie de Jon Moore.)

După cum puteți vedea, sigla constă dintr-un element vizual și numele companiei. Doar în versiunea pătrată, am ales să nu afișez numele. Motivul pentru asta este că am dorit să fie recunoscut, chiar și atunci când este folosit ca miniatură minusculă de doar aproximativ 32px x 32px.

2. Configurarea fișierului SVG

Înainte de a exporta orice imagini, trebuie să creăm un nou fișier SVG. Poate este puțin înfricoșător să îți pornești SVG-ul cu cod de scriere, dar în final, nu este prea complicat. Promisiunea Pinky. Nu ne trebuie decât o deschidere și o etichetă de închidere de acest fel:

Dacă priviți atributele, veți observa că nu există un atribut viewBox. Am setat doar lățimea și înălțimea la 100%.

(Notă: Există și două atribute xmlns. Pentru a fi sincer, nu știu exact de ce trebuie să fie acolo, probabil că ar trebui să-l google ... oricum dacă le ștergeți, nu veți putea folosi simboluri în SVG și primiți în schimb câteva mesaje de eroare urâte.)

3. Exportarea simbolurilor SVG

Deoarece vom folosi ambele elemente ca simboluri în SVG-ul final, trebuie să le punem pe fiecare pe o singură planșă de artă și să le exportăm ca SVG.

Puneți toate simbolurile pe tablouri de artă separate înainte de a le exporta ca SVG

Este esențial să nu exportați obiectele, ci să creați întotdeauna o nouă tablă de artă. Dacă exportați elemente dintr-o tablă de artă mai mare, veți ajunge cu atribute de transformare cu aspect ciudat atașate grupurilor dvs. De asemenea, ajută la detașarea tuturor simbolurilor și la ștergerea tuturor grupurilor neutilizate. În cele din urmă, efectuați o denumire corectă și vedeți dacă există o mască aplicată, care nu este utilizată.

Acum să vedem cum arată codul exportat:

Vă recomand să folosiți ceva de genul SVGOMG pentru a reduce dimensiunea fișierului și a șterge toate lucrurile inutile. Dar nu curățați ID-urile. Dacă ați numit straturile dvs. în Sketch, le puteți identifica mai ușor prin ID în fișierul final. Așa va arăta fișierul optimizat:

Dacă totul este corect, veți vedea un grup care poartă numele tabloului de artă ca ID. În interiorul acestui grup este interesat conținutul. În acest caz, este un dreptunghi care servește ca fundal și o cale complexă care construiește IX-ul (Roman 9 rotit în sens invers acelor de ceasornic cu 90 de grade ... doar în caz că întrebați).

4. Construirea simbolurilor

Toate fișierele noastre sunt gata și pot fi reunite. Începeți prin a scrie câteva etichete simbol în fișierul final și dați fiecăruia un ID unic, precum și un atribut viewBox care se potrivește cu viewBox-ul fișierelor exportate.


  
    
  
  
    
  

În cele din urmă, lipiți conținutul fișierelor dvs. exportate (tot ceea ce face parte din grupul numit ca tabloul dvs. de artă) în etichetele simbolului. După ce ați terminat cu acest fișier, ar trebui să arate astfel:

5. Folosind simbolurile noastre

Până acum, bine. Din păcate, dacă deschideți fișierul într-un browser, nu veți vedea nimic. Deocamdată, ne-am definit simbolurile, dar nu le-am plasat niciodată nicăieri. Pentru a insera un simbol aveți nevoie de o etichetă de utilizare în fișierul dvs.:

Acum să vedem ce se întâmplă exact aici.

Mai întâi xlink: href indică un simbol cu ​​un ID unic și îi va reda conținutul ... ei bine, nu este redat cu adevărat, ci clonat și, dintr-o dată, apare un lucru ciudat numit Shadow DOM. Poate suna ca ceva din Stranger Things, dar nu trebuie să vă fie frică. Atâta timp cât nu doriți să schimbați nimic în interiorul instanței simbolului prin CSS, nu există nimic de care să vă faceți griji.

În continuare avem atributele x, y, lățime și înălțime. Poate ați ghicit deja, că aceste atribute definesc poziția și dimensiunile simbolului redat. Dar nu este dată o unitate, deci cât de mare va fi simbolul nostru? În interiorul unui SVG, unitățile sunt definite prin atributul viewBox setat în eticheta SVG. Deoarece nu am setat un ViewBox și am definit doar lățimea și înălțimea (100%), o unitate se potrivește cu un pixel, iar simbolul nostru va avea o lățime de 100px. Și nu contează dacă schimbați lățimea SVG. Acesta va rămâne întotdeauna la lățimea de 100px.

Încercați să schimbați atributele de lățime și înălțime din acest CodePen. Veți observa că simbolul își va păstra întotdeauna raportul de aspect. Din fericire, este exact ceea ce avem nevoie pentru sigla noastră. Dacă doriți să schimbați comportamentul de redimensionare, aveți nevoie de un atribut numit prezervareAspectRatio. Consultați articolul lui @ SaraSoueidan despre Înțelegerea sistemelor de coordonate SVG și transformare dacă doriți să aflați mai multe despre el.

În afară de valorile unitare, puteți utiliza, de asemenea, procente pentru a defini poziția și dimensiunile prin atribute. Așadar, pentru a face acest simbol să arate ca versiunea pătrată, folosiți pur și simplu o lățime de 90% și poziționați colțul din stânga sus 5% din caseta de delimitare a imaginii:

(Poate credeți că setarea lățimii sau înălțimii pe „auto” este o idee bună ... nu, nu. Safari și Firefox o ignoră în timp ce Chrome nu va face nimic.)

6. Combinarea simbolurilor în interiorul unui simbol nou

Pentru versiunea de portret, vom avea nevoie de ambele simboluri. Pentru a ne asigura că acestea sunt proporționale și au întotdeauna aceeași distanță față de graniță și una de cealaltă, pur și simplu creăm încă un simbol. Acest simbol are din nou propriul atribut viewBox care ne permite să plasăm simbolurile noastre în noul sistem de coordonate. Pentru a vedea unde trebuie amplasat exact totul, puteți pur și simplu să vă întoarceți la fișierul de schiță și să inspectați dimensiunile și distanțele.

Versiune portret: violet: viewBox - roșu: poziție - turcoaz: lățime și înălțime

Acum, trebuie doar să traducem toate numerele în noul nostru simbol SVG, care va arăta astfel:


  
   

Când folosim acest simbol, nu l-am dori să aibă o lățime de 100%, așadar să-l mărim doar ca simbolul nostru pătrat.

7. Ascunde și arată

Până la acest moment am creat trei simboluri și avem două etichete de utilizare în SVG-ul nostru.

În cele din urmă, partea amuzantă începe și o putem face receptivă. În acest moment ambele simboluri sunt redate una peste alta. Pentru a ascunde părțile pe care nu dorim să le afișăm, trebuie să adăugăm câteva clase la etichetele de utilizare.


Acum, singurul lucru care lipsește este unele CSS care să arate o singură versiune de logo simultan. Puteți adăuga o etichetă