Opbygning af et lydhør billede

Sådan opretter du et logo, der svarer til sit eget billedformat

Der er ganske mange artikler på nettet, der omhandler lydhør logoer. Det mest populære eksempel kan være Responsive Logos-webstedet, der viser nogle meget velkendte logoer i forskellige variationer for forskellige skærmstørrelser. Da jeg første gang så dette eksempel, troede jeg, at det ikke var meget mere end en lille gimmick. I sidste ende er det bare

med et stort image sprite som baggrund. Det var ikke før jeg hørte en tale på Smashing Conference af @MikeRiethmuller med titlen: Beyond Media Queries, at jeg blev mere interesseret i dette emne. Ud over foredraget kan jeg varmt anbefale at læse hans artikel “SVG har mere potentiale”.

Der er to ting, jeg lærte, som virkelig gjorde mig ophidset.

  1. Når du bruger SVG, kan du slippe viewBox-attributten og etablere et nyt koordinatsystem på indlejrede SVG-symbolelementer ved at anvende en ny viewBox. (Ja, jeg ved. Det lyder forvirrende. Nedenfor forklarer jeg mere detaljeret.)
  2. Når du bruger medieforespørgsler inde i SVG-filer og derefter indsætter billedet via img-tag eller som et CSS-baggrundsbillede, er mediespørgsmålene bundet til billedets bredde. Næsten samme opførsel, som hvis du brugte Container Queries.

Ideen blev født

Efter at jeg havde læst om alt dette, fik jeg ideen om at opbygge en logo-fil til vores firma, der ikke kun reagerer på browservedden, men i stedet tilpasser sig under hensyntagen til dens billedformat. Så du kan bruge det hvor som helst, og selve filen vælger, hvilken version der skal vises, afhængigt af størrelsen, den er givet.

Det endelige resultat

Hvis du allerede er begejstret, skal du downloade den endelige DEMO-FIL eller se den i handling i denne CodePen.

Trin for trin (… uuh Baby ♬)

I det følgende vil jeg lede dig gennem hvert trin, du er nødt til at udføre for at opbygge dit eget lydhøre logo. Du skal i det mindste have en vis grundlæggende viden om SVG og også CSS. Men den gode nyhed er: der er overhovedet ingen JavaScript. For det meste er vi bare nødt til at kopiere kode fra en fil til en anden.

1. Design af logoet

Lad os starte med at designe fire versioner af vores logo. Mit valg af værktøj til det er Sketch.

Logovarianter: 1. Skyskraber - 2. Portræt - 3. firkant - 4. landskab

Hver gang der er elementer, der kan findes på flere versioner, anbefaler jeg at bruge symboler i Sketch. Dette vil gøre det lettere for dig i fremtiden, og den SVG, som vi skal bygge, bruger de samme symboler. (Hvis du ikke er bekendt med symboler i Sketch, kan jeg varmt anbefale denne Medium Story af Jon Moore.)

Som du kan se, består logoet af et visuelt element og firmanavnet. Kun i den firkantede version valgte jeg ikke at vise navnet. Årsagen til dette er, at jeg ønskede, at den skulle kunne genkendes, selv når den blev brugt som en lille miniature af måske kun ca. 32px x 32px.

2. Opsætning af SVG-filen

Inden vi eksporterer billeder, skal vi oprette en ny SVG-fil. Måske er det lidt skræmmende at starte din SVG med at skrive kode, men i sidste ende er det ikke for kompliceret. Lillefinger løfte. Alt, hvad vi har brug for, er en åbning og et lukningskode som dette:

Hvis du ser på attributterne, vil du bemærke, at der ikke er nogen viewBox-attribut. Vi indstiller kun bredde og højde til 100%.

(Bemærk: Der er også to xmlns-attributter til stede. For at være ærlig, ved jeg ikke nøjagtigt, hvorfor de skal være der, jeg burde sandsynligvis google det… alligevel, hvis du sletter dem, vil du ikke være i stand til at bruge nogen symboler inden for SVG og få nogle grimme fejlmeddelelser i stedet.)

3. Eksport af SVG-symboler

Fordi vi bruger begge elementer som symboler i den endelige SVG, er vi nødt til at placere hver af dem på et enkelt artboard og eksportere dem som SVG.

Placer alle symboler på separate tegnebræt, før du eksporterer dem som SVG

Det er vigtigt, at du ikke eksporterer objekterne, men altid opretter et nyt tegnebræt. Hvis du eksporterer elementer fra et større tegnebræt, ender du med mærkelig udseende transformeringsattributter knyttet til dine grupper. Det hjælper også med at fjerne alle symboler og slette alle ubrugte grupper. Til sidst skal du foretage en ordentlig navngivning og se, om der er anvendt nogen maske, der ikke bruges.

Lad os nu se, hvordan den eksporterede kode ser ud:

Jeg vil anbefale at bruge noget som SVGOMG til at reducere filstørrelse og slette alle unødvendige ting. Men rengør ikke ID'er. Hvis du navngav dine lag i Sketch, kan du lettere identificere dem ved ID i den endelige fil. Sådan ser din optimerede fil ud:

Hvis alt er korrekt, vil du se en gruppe, der har navnet på dit tegnebræt som ID. Inde i denne gruppe er indholdet, det er af interesse. I dette tilfælde er det et rektangel, der tjener som baggrund og en kompleks sti, der bygger IX (roman 9 roteret mod uret med 90 grader ... bare i tilfælde af at du spurgte).

4. Bygning af symbolerne

Alle vores filer er klar og kan sættes sammen. Start med at skrive nogle symbolmærker i din endelige fil, og giv hver en unik ID såvel som en viewBox-attribut, der matcher viewBox for de eksporterede filer.


  
    
  
  
    
  

Til sidst indsæt indholdet af dine eksporterede filer (alt inden for gruppen, der er navngivet som dit tegnebræt) inde i symbolkoderne. Når du er færdig med det, skal din fil se sådan ud:

5. Brug af vores symboler

Så langt så godt. Desværre, hvis du åbner filen i en browser, ser du ikke noget. For nu definerede vi vores symboler, men placerede dem aldrig noget sted. For at indsætte et symbol har du brug for et brugsmærke i din fil:

Lad os nu se hvad der sker nøjagtigt her.

Først xlink: href peger på et symbol med en unik ID og vil gengive dens indhold ... godt, det er ikke rigtig gengivet, men klonet og pludselig kommer der en underlig ting op, kaldet Shadow DOM. Det lyder måske som noget fra Stranger Things, men du behøver ikke at være bange. Så længe du ikke ønsker at ændre noget inden i symbolforekomsten via CSS, er der intet at bekymre sig om.

Dernæst har vi x, y, bredde og højde attributter. Du har måske allerede gættet, at disse attributter definerer placeringen og dimensioner for det gengivne symbol. Men der er ingen enhed givet, så hvor stort vil vores symbol være? Inde i en SVG defineres enhederne af viewBox-attributten, der er angivet i SVG-tagget. Da vi ikke satte en viewBox og kun definerede bredde og højde (100%), matcher en enhed en pixel, og vores symbol har en bredde på 100px. Og det betyder ikke noget, hvis du ændrer bredden på SVG. Det forbliver altid ved 100px bredde.

Prøv at ændre bredde- og højdeegenskaber i denne CodePen. Du vil bemærke, at symbolet altid vil opretholde dets størrelsesforhold. Heldigvis er det nøjagtigt hvad vi har brug for vores logo. Hvis du ønskede at ændre størrelsesadfærd, havde du brug for en attribut kaldet preserveAspectRatio. Tjek @ SaraSoueidans artikel om forståelse af SVG-koordinatsystemer og transformation, hvis du vil lære mere om det.

Bortset fra de enhedsløse værdier kan du også bruge procentsatser til at definere position og dimensioner gennem attributterne. Så for at få dette symbol til at se ud som den firkantede version, skal du blot bruge en bredde på 90% og placere det øverste venstre hjørne 5% fra billedets afgrænsningsfelt:

(Måske synes du, at indstilling af bredde eller højde til 'auto' er en god ide ... det er det ikke. Safari og Firefox ignorerer det simpelthen, mens Chrome ikke gengiver noget.)

6. Kombination af symboler inde i et nyt symbol

Til portrætversionen har vi brug for begge symboler. For at sikre, at de skalerer proportionalt og altid har den samme afstand til grænsen og til hinanden, skaber vi blot endnu et symbol. Dette symbol har igen sin egen viewBox-attribut, som gør det muligt for os at placere vores symboler i det nye koordinatsystem. For at se, hvor nøjagtigt alt skal placeres, kan du blot gå tilbage til din skissefil og inspicere størrelser og afstande.

Portræt-version: Purple: viewBox - Rød: Position - Turkis: Bredde og Højde

Nu skal vi kun oversætte alle numre til vores nye SVG-symbol, der så vil se sådan ud:


  
   

Når vi bruger dette symbol, ville vi ikke have det i 100% bredde, så lad os bare skalere det ned som vores firkantede symbol.

7. Skjul og vis

Indtil dette tidspunkt oprettede vi tre symboler og har to brugskoder i vores SVG.

Endelig begynder den sjove del, og vi kan gøre den lydhør. Lige nu gengives begge symboler oven på hinanden. For at skjule de dele, vi ikke ønsker at vise, er vi nødt til at føje nogle klasser til brugskoder.


Det eneste, der mangler er nogle CSS, der kun viser en logoversion ad gangen. Du kan tilføje et