Vastuullisen kuvan rakentaminen

Kuinka luoda logo, joka vastaa omaan kuvasuhteeseensa

Verkossa on melko vähän artikkeleita, jotka käsittelevät reagoivia logoja. Suosituin esimerkki voi olla Responsive Logos -sivusto, joka näyttää joitain hyvin tunnettuja logoja eri muunnelmina eri näyttökoot. Kun näin ensimmäisen kerran tämän, luulin, että se ei ollut paljon muuta kuin pieni temppu. Loppujen lopuksi se on vain

ja iso kuva on taustana. Vasta sitten, kun kuulin @MikeRiethmullerin Smashing-konferenssissa puhumisen nimeltä: Beyond Media Queries, kiinnostuin tästä aiheesta enemmän. Puheen lisäksi suosittelen lukemaan hänen artikkeliaan “SVG: llä on enemmän potentiaalia”.

Olen oppinut kaksi asiaa, jotka todella innostivat minua.

  1. Kun käytät SVG: tä, voit pudottaa viewBox-määrite ja luoda uuden koordinaattijärjestelmän sisäkkäisissä SVG-symbolielementeissä soveltamalla uutta viewBoxia. (Joo, tiedän. Kuulostaa hämmentävältä. Selitän alla.)
  2. Kun käytät mediakyselyjä SVG-tiedostojen sisällä ja lisäät kuvan sitten img-tagilla tai CSS-taustakuvana, mediakyselyt sidotaan kuvan leveyteen. Melkein sama käyttäytyminen kuin jos käyttäisit konttikyselyjä.

Idea syntyi

Luettuani tästä kaikesta sain idean rakentaa yrityksellemme logo-tiedosto, joka ei vain reagoi selaimen leveyteen, vaan mukautuu sen sijaan kunnioittaen sen kuvasuhdetta. Joten voit käyttää sitä missä tahansa, ja tiedosto itse valitsee näytettävän version annetun koon mukaan.

Lopullinen tulos

Jos olet jo innoissasi, lataa lopullinen DEMO-TIEDOSTO tai katso se käytännössä tässä CodePenissä.

Askel askeleelta (… uuh vauva ♬)

Seuraavassa aion käydä läpi kaikki vaiheet, jotka sinun on suoritettava oman reagoivan logon luomiseksi. Sinulla tulisi olla ainakin joitain perustietoja SVG: stä ja myös CSS: stä. Mutta hyvä uutinen on: JavaScriptiä ei tule lainkaan. Suurimmaksi osaksi meidän on vain kopioitava koodi tiedostosta toiseen.

1. Logon suunnittelu

Aloitetaan suunnittelemalla logomme neljä versiota. Valitsemani työkalu siihen on Sketch.

Logon variaatiot: 1. Pilvenpiirtäjä - 2. Muotokuva - 3. Neliö - 4. Maisema

Aina kun on elementtejä, joita voi löytää useista versioista, suosittelen käyttämään symboleja Sketchissä. Tämä tekee siitä sinulle tulevaisuudessa helpompaa, ja rakennettava SVG aikoo käyttää samoja symboleja. (Jos et tunne Sketchissä olevia symboleja, suosittelen tätä Jon Mooren Medium Storya.)

Kuten näette, logo koostuu visuaalisesta osasta ja yrityksen nimestä. Vain neliömäisessä versiossa päätin olla näyttämättä nimeä. Syynä tähän on, että halusin sen olevan tunnistettavissa, vaikka sitä käytettäisiinkin pienenä pikkukuvana vain noin 32xx32px.

2. SVG-tiedoston asettaminen

Ennen kuin vietämme kuvia, meidän on luotava uusi SVG-tiedosto. Ehkä on vähän pelottavaa aloittaa SVG-koodisi kirjoittamalla koodi, mutta loppujen lopuksi se ei ole liian monimutkainen. Pikkurilli lupaus. Tarvitsemme vain avautuvan ja sulkevan tagin:

Jos tarkastelet määritteitä, huomaat, että viewBox-määrite ei ole. Asetamme vain leveyden ja korkeuden 100%: iin.

(Huomautus: Läsnä on myös kaksi xmlns-määritemääriä. Rehellisesti sanottuna en tiedä tarkalleen miksi niiden on oltava siellä, minun pitäisi luultavasti google tehdä se. Joka tapauksessa, jos poistat ne, et voi käyttää mitään symboleja SVG ja saat sen sijaan ruma virheilmoitukset.)

3. SVG-symbolien vienti

Koska käytämme molempia elementtejä symboleina lopullisessa SVG: ssä, meidän on laitettava molemmat niistä yhdelle taululle ja vietävä ne SVG: na.

Sijoita kaikki symbolit erillisille tauluille ennen vientiä ne SVG-tiedostoina

On erittäin tärkeää, että et vie esineitä, vaan luot aina uuden taulun. Jos viet elementtejä suuremmasta kuvataulusta, ryhmiin liitetään outoja näköisiä muunnosmääritteitä. Se auttaa myös irrottamaan kaikki symbolit ja poistamaan kaikki käyttämättömät ryhmät. Viimeistele lopuksi oikea nimeäminen ja tarkista, onko maskia sovellettu, jota ei käytetä.

Katsotaan nyt, miltä viety koodi näyttää:

Suosittelen käyttämään jotain SVGOMG: ää tiedoston koon pienentämiseksi ja tarpeettomien asioiden poistamiseksi. Mutta älä puhdista henkilötodistuksia. Jos nimeit tasot luonnoksessa, voit tunnistaa ne helpommin tunnisteella lopullisessa tiedostossa. Näin näyttää optimoitu tiedosto:

Jos kaikki on oikein, näet ryhmän, jolla on kuvankäsittelyn nimi tunnuksella. Tämän ryhmän sisällä on sisältöä, joka kiinnostaa. Tässä tapauksessa se on taustana toimiva suorakulmio ja monimutkainen polku, joka rakentaa IX: n (roomalainen 9 kiertyi vastapäivään 90 astetta ... vain siinä tapauksessa, että kysyit).

4. Symbolien rakentaminen

Kaikki tiedostomme ovat valmiita ja voidaan koota. Aloita kirjoittamalla joitain symbolitunnisteita lopulliseen tiedostoon ja antamalla jokaiselle yksilöllinen tunnus sekä viewBox-määrite, joka vastaa vietyjen tiedostojen näkymäkenttää.


  
    
  
  
    
  

Liitä lopuksi vietyjen tiedostojen sisältö (kaikki ryhmään kuuluvaksi, joka on nimetty kuvataulun kaltaiseksi) symbolitunnisteisiin. Kun olet valmis, että tiedostosi pitäisi näyttää tältä:

5. Symbolien käyttäminen

Toistaiseksi niin hyvä. Valitettavasti, jos avaat tiedoston selaimessa, et näe mitään. Toistaiseksi määrittelimme symbolimme, mutta emme koskaan sijoittaneet niitä mihinkään. Symbolin lisäämiseksi tarvitset käyttötagin tiedostoon:

Katsotaanpa nyt mitä täällä tapahtuu.

Ensin xlink: href osoittaa symbolin, jolla on ainutlaatuinen tunnus ja tuottaa sen sisällön ... no, sitä ei oikeastaan ​​renderoida, vaan kloonataan ja yhtäkkiä on ilmestymässä outo asia, nimeltään Shadow DOM. Se voi kuulostaa jotain muukalaisista asioista, mutta sinun ei tarvitse pelätä. Niin kauan kuin et halua muuttaa mitään symboliesityksen sisällä CSS: n kautta, ei ole mitään hätää.

Seuraavaksi meillä on x, y, leveys ja korkeus määritteet. Saatat jo arvata, että nämä määritteet määrittävät renderoidun symbolin sijainnin ja mitat. Mutta yksikköä ei ole annettu, joten kuinka suuri symbolimme on? SVG: n sisällä yksiköt määritetään SVG-tunnisteessa asetetulla viewBox-määritteellä. Koska emme asettaneet näkymäkenttää ja määrittelimme vain leveyden ja korkeuden (100%), yksi yksikkö vastaa yhtä pikseliä ja symbolimme leveys on 100 kuvapistettä. Ja sillä ei ole väliä, muutatko SVG: n leveyttä. Se pysyy aina 100 kuvapisteen leveydellä.

Kokeile muuttaa tämän CodePenin leveys- ja korkeusmääritteitä. Huomaat, että symboli pitää aina kuvasuhteensa. Onneksi tätä tarvitsemme juuri logollemme. Jos halusit muuttaa kokoa muuttavaa käyttäytymistä, tarvitsit ominaisuutta nimeltä säilytäAspectRatio. Katso @ SaraSoueidanin artikkeli SVG-koordinaattijärjestelmien ymmärtämisestä ja muuntamisesta, jos haluat lisätietoja siitä.

Yksiköiden arvojen lisäksi voit myös käyttää prosenttimääriä paikan ja mittojen määrittelemiseen määritteiden kautta. Joten jotta tämä symboli näyttää neliömäiseltä versiosta, käytä vain 90%: n leveyttä ja aseta sen vasen yläkulma 5%: n kuvan raja-laatikosta:

(Ehkä luulet, että leveyden tai korkeuden asettaminen automaattiseksi on hyvä idea ... no, se ei ole. Safari ja Firefox yksinkertaisesti jättävät sen huomiotta, kun taas Chrome ei tee mitään.)

6. Symbolien yhdistäminen uuden symbolin sisällä

Muotokuvaversiossa tarvitsemme molemmat symbolit. Jotta voimme varmistaa, että ne skaalautuvat suhteessa toisiinsa ja että niillä on aina sama etäisyys rajaan ja toisiinsa, luomme yksinkertaisesti uuden symbolin. Tällä symbolilla on jälleen oma viewBox -attribuutti, jonka avulla voimme sijoittaa symbolimme uuteen koordinaattijärjestelmään. Voit tarkistaa, mihin tarkalleen kaikki on sijoitettava, palaamalla luonnokseen ja tarkistamalla koot ja etäisyydet.

Muotokuva-versio: Violetti: viewBox - punainen: sijainti - turkoosi: leveys ja korkeus

Nyt meidän on käännettävä kaikki numerot vain uudelle SVG-symbolillemme, joka näyttää tältä:


  
   

Kun me käytämme tätä symbolia, emme haluaisi sitä 100% leveydellä, joten skaalataan se vain alaspäin kuin neliösymboli.

7. Piilota ja näytä

Tähän saakka loimme kolme symbolia ja meillä on kaksi käyttötagia SVG: ssä.

Lopuksi hauska osa alkaa, ja voimme tehdä siitä reagoivan. Tällä hetkellä molemmat symbolit esitetään päällekkäin. Piilottaaksemme osat, joita emme halua näyttää, meidän on lisättävä joitain luokkia käyttötageihin.


Nyt ainoa puuttuva asia on jokin CSS, joka näyttää vain yhden logoversion kerrallaan. Voit lisätä -tagin SVG-tiedostoosi ja käyttää joitain mediakyselyjä aivan kuten tavallisessa CSS-tiedostossa.

CSS: ssä käytät todennäköisimmin jotain @media (min-leveys: 768px) {...}, mutta silloin katsot vain kuvan leveyttä. Olemme kiinnostuneita kuvasuhteesta eikä leveydestä, joten mediakyselyjemme on näytettävä tältä: @media (min. Kuvasuhde: 1/2) {...}.

Kahdesta ensimmäisestä versiostamme tehdään muotokuvaversio oletukseksi ja näytä yhden IX-version versio vain, kun kuvan leveys on vähintään sama kuin kuvan korkeus. Toisin sanoen: kohdassa, jossa kuva muuttuu muototilasta maisemaksi, emme näytä typografiaa, vaan vain graafisen logon.