Tein äskettäin tiiliseinän kuvion osana minun #PetitePatterns sarja, haaste, jossa luon orgaanisen näköisiä kuvioita tai tekstuureja SVG:ssä 560 tavun (tai suunnilleen kahden twiitin kokoisen) sisällä. Vastatakseni tähän rajoitteeseen olen käynyt läpi matkan, joka on opettanut minulle radikaaleja tapoja optimoida SVG-kuvioita niin, että ne sisältävät mahdollisimman vähän koodia vaikuttamatta yleiseen kuvanlaatuun.
Haluan opastaa sinut prosessin läpi ja näyttää, kuinka voimme viedä SVG-kuvion, joka alkaa 197 tavusta, aina vain 44 tavuun – huima 77.7 %:n vähennys!
SVG-kuvio
Tätä kutsutaan "juoksevaksi sidos" -tiilikuvioksi. Se on yleisin tiilikuvio, ja olet varmasti nähnyt ennenkin: jokainen tiilirivi on siirretty puolet tiilen pituudesta, mikä luo toistuvan porrastetun kuvion. Järjestely on melko yksinkertainen, joten se tekee SVG:t <pattern>
elementti sopii täydellisesti toistamaan se koodina.
SVG <pattern>
elementti käyttää ennalta määritettyä graafista objektia, joka voidaan replikoida (tai "laatoittaa") kiintein väliajoin pitkin vaaka- ja pystyakselia. Pohjimmiltaan määrittelemme suorakaiteen muotoisen laattakuvion ja se toistetaan täyttöalueen maalaamiseksi.
Ensin asetetaan tiilen mitat ja rako kunkin tiilen välillä. Yksinkertaisuuden vuoksi käytetään puhtaita, pyöreitä lukuja: leveys 100
ja korkeus 30
tiilille ja 10
niiden välisille vaaka- ja pystyrakoille.
Seuraavaksi meidän on tunnistettava "peruslaatamme". Ja "laatalla" puhun pikemminkin kuviolaatoista kuin fyysisistä laatoista, joita ei pidä sekoittaa tiileihin. Käytetään yllä olevan kuvan korostettua osaa kuviolaattaamme: ensimmäisessä rivissä kaksi kokonaista tiiliä ja toisessa rivissä yksi kokonainen kahden puolikkaan tiilen välissä. Huomaa, miten ja missä aukot on sisällytetty, koska ne on sisällytettävä toistuvaan kuvioruutuun.
Käytettäessä <pattern>
, meidän on määriteltävä kuvio width
ja height
, jotka vastaavat pohjalaatan leveyttä ja korkeutta. Mittojen saamiseksi tarvitsemme hieman matematiikkaa:
Tile Width = 2(Brick Width) + 2(Gap) = 2(100) + 2(10) = 220
Tile Height = 2(Bright Height) + 2(Gap) = 2(30) + 2(10) = 80
Selvä, siis kuviolaattamme on 220✕80
. Meidän on myös asetettava patternUnits
attribuutti, jossa arvo userSpaceOnUse
tarkoittaa käytännössä pikseleitä. Lopuksi lisätään an id
kuvioon on tarpeen, jotta siihen voidaan viitata, kun maalaamme sillä toista elementtiä.
<pattern id="p" width="220" height="80" patternUnits="userSpaceOnUse"> <!-- pattern content here -->
</pattern>
Nyt kun olemme määrittäneet laatan mitat, haasteena on luoda koodi laatalle tavalla, joka tuottaa grafiikan mahdollisimman pienillä tavumäärällä. Tähän toivomme päätyvän aivan lopussa:
Ensimmäinen merkintä (197 tavua)
Yksinkertaisin ja selittävin tapa luoda tämä mieleeni tuleva malli uudelleen on piirtää viisi suorakulmiota. Oletusarvoisesti fill
SVG-elementin on musta ja stroke
on läpinäkyvä. Tämä toimii hyvin SVG-kuvioiden optimoinnissa, koska meidän ei tarvitse erikseen ilmoittaa niitä koodissa.
Jokainen alla olevan koodin rivi määrittelee suorakulmion. The width
ja height
ovat aina asetettuja, ja x
ja y
paikat asetetaan vain, jos suorakulmio on siirretty 0
asentoon.
<rect width="100" height="30"/>
<rect x="110" width="100" height="30"/>
<rect y="40" width="45" height="30"/>
<rect x="55" y="40" width="100" height="30"/>
<rect x="165" y="40" width="55" height="30"/>
Laatan ylimmässä rivissä oli kaksi täysleveää tiiliä, toinen tiili on sijoitettu x="110"
jolloin 10
pikseliä ennen tiiliä. Samoin on 10
pikseliä välin jälkeen, koska tiili päättyy 210
pikseliä (110 + 100 = 210
) vaaka-akselilla, vaikka <pattern>
leveys on 220
pikseliä. Tarvitsemme vähän ylimääräistä tilaa; muuten toinen tiili sulautuisi viereisen laatan ensimmäiseen tiileen.
Toisen (alarivin) tiilet on siirretty siten, että rivi sisältää kaksi puolikiiltoa ja yhden kokonaisen tiilen. Tässä tapauksessa haluamme puolileveät tiilet sulautuvan yhteen, jotta alussa tai lopussa ei ole rakoa, jolloin ne voivat virrata saumattomasti vierekkäisten kuviolaattojen tiilien kanssa. Näitä tiiliä kompensoitaessa meidän on otettava mukaan myös puolivälit, joten x
arvot ovat 55
ja 165
Vastaavasti.
Elementtien uudelleenkäyttö, (-43B, yhteensä 154B)
Tuntuu tehottomalta määritellä jokainen tiili niin yksiselitteisesti. Eikö SVG-kuvioita voi mitenkään optimoida käyttämällä muotoja uudelleen?
En usko, että yleisesti tiedetään, että SVG:ssä on a <use>
elementti. Voit viitata sen avulla toiseen elementtiin ja hahmontaa sen missä tahansa <use>
käytetään. Tämä säästää useita tavuja, koska voimme jättää määrittämättä jokaisen tiilen leveyden ja korkeuden ensimmäistä lukuun ottamatta.
Se sanoi, <use>
tulee pienellä hinnalla. Eli meidän on lisättävä an id
elementille, jota haluamme käyttää uudelleen.
<rect id="b" width="100" height="30"/>
<use href="#b" x="110"/>
<use href="#b" x="-55" y="40"/>
<use href="#b" x="55" y="40"/>
<use href="#b" x="165" y="40"/>
Lyhyin id
mahdollista on yksi merkki, joten valitsin "b" tiilelle. The <use>
elementti voidaan sijoittaa samalla tavalla kuin <rect>
, Jossa x
ja y
attribuutteja offseteina. Koska jokainen tiili on nyt täysleveä, kun olemme vaihtaneet niihin <use>
(muista, että puolitimme tiilet kuviolaatan toisessa rivissä), meidän on käytettävä negatiivista x
arvo toisella rivillä, ja varmista sitten, että viimeinen tiili vuotaa yli laatasta, jotta tiilien välinen saumaton yhteys muodostuu. Nämä ovat kuitenkin kunnossa, koska kaikki, mikä putoaa kuviolaatan ulkopuolelle, leikataan automaattisesti pois.
Löydätkö joitain toistuvia merkkijonoja, jotka voidaan kirjoittaa tehokkaammin? Jatketaan niitä seuraavaksi.
Kirjoitetaan uudelleen polkuun (-54B, yhteensä 100B)
<path>
on luultavasti tehokkain elementti SVG:ssä. Voit piirtää melkein minkä tahansa muodon, jossa on "komentoja". d
attribuutti. Käytettävissä on 20 komentoa, mutta tarvitsemme vain yksinkertaisimmat suorakulmioista.
Tässä minä sen kanssa päädyin:
<path d="M0 0h100v30h-100z M110 0h100v30h-100 M0 40h45v30h-45z M55 40h100v30h-100z M165 40h55v30h-55z"/>
Tiedän, super outoja numeroita ja kirjaimia! Niillä kaikilla on merkitys, tietysti. Tässä on mitä tapahtuu tässä erityistapauksessa:
M{x} {y}
: Siirtyy pisteeseen koordinaattien perusteella.z
: Sulkee nykyisen segmentin.h{x}
: Piirtää vaakaviivan nykyisestä pisteestä, jonka pituus onx
merkin määrittelemään suuntaanx
. Pienet kirjaimetx
osoittaa suhteellista koordinaattia.v{y}
: Piirtää pystysuoran viivan nykyisestä pisteestä, jonka pituus ony
merkin määrittelemään suuntaany
. Pienet kirjaimety
osoittaa suhteellista koordinaattia.
Tämä merkintä on paljon suppeampi kuin edellinen (rivinvaihdot ja sisennykset ovat vain luettavuuden vuoksi). Ja hei, olemme onnistuneet leikkaamaan pois puolet alkuperäisestä koosta, saavuttaen 100 tavua. Silti jokin saa minut tuntemaan, että tämä voisi olla pienempi…
Laattojen versio (-38B, yhteensä 62B)
Eikö kuviolaatassamme ole toistuvia osia? On selvää, että ensimmäisessä rivissä koko tiili toistetaan, mutta entä toinen rivi? Se on vähän vaikeampi nähdä, mutta jos leikkaamme keskimmäisen tiilen puoliksi, se tulee selväksi.
No, keskimmäistä tiiliä ei ole leikattu tarkalleen puoliksi. Siinä on pieni poikkeama, koska meidän on myös otettava huomioon ero. Joka tapauksessa löysimme juuri yksinkertaisemman pohjalaattakuvion, mikä tarkoittaa vähemmän tavuja! Tämä tarkoittaa myös sitä, että meidän on puolitettava width
meidän <pattern>
elementti 220 - 110.
<pattern id="p" width="110" height="80" patternUnits="userSpaceOnUse"> <!-- pattern content here -->
</pattern>
Katsotaan nyt, kuinka yksinkertaistettu laatta piirretään <path>
:
<path d="M0 0h100v30h-100z M0 40h45v30h-45z M55 40h55v30h-55z"/>
Koko pienennetään 62 tavuun, mikä on jo alle kolmannes alkuperäisestä koosta! Mutta miksi lopettaa tähän, kun voimme tehdä vielä enemmän!
Polkukomentojen lyhentäminen (-9B, yhteensä 53B)
Kannattaa perehtyä asiaan hieman syvemmälle <path>
elementti, koska se tarjoaa enemmän vihjeitä SVG-kuvioiden optimointiin. Yksi väärinkäsitys minulla on ollut työskennellessäni <path>
koskee sitä, kuinka fill
attribuutti toimii. Lapsuudessani paljon MS Paintilla pelattuani olen oppinut, että minkä tahansa muodon, jonka haluan täyttää yhtenäisellä värillä, on oltava suljettu, eli siinä ei ole avoimia kohtia. Muuten maali valuu pois muodosta ja roiskuu kaiken päälle.
SVG:ssä tämä ei kuitenkaan pidä paikkaansa. Sallikaa minun lainata spec itse:
Täyttötoiminto täyttää avoimet alipolut suorittamalla täyttötoiminnon ikään kuin polkuun lisättäisiin ylimääräinen "closepath"-komento, joka yhdistää alipolun viimeisen pisteen alipolun ensimmäiseen pisteeseen.
Tämä tarkoittaa, että voimme jättää pois sulkemispolun komennot (z
), koska alipolut katsotaan automaattisesti suljetuiksi, kun ne täytetään.
Toinen hyödyllinen asia, joka on tiedettävä polkukäskyistä, on, että ne tulevat isoilla ja pienillä kirjaimilla. Pienet kirjaimet tarkoittavat, että käytetään suhteellisia koordinaatteja; isot kirjaimet tarkoittavat, että sen sijaan käytetään absoluuttisia koordinaatteja.
Se on hieman hankalampaa kuin sen kanssa H
ja V
komennot, koska ne sisältävät vain yhden koordinaatin. Näin kuvailisin näitä kahta komentoa:
H{x}
: Piirtää vaakaviivan nykyisestä pisteestä koordinaattiinx
.V{y}
: Piirtää pystysuoran viivan nykyisestä pisteestä koordinaattiiny
.
Kun piirrämme kuviolaatan ensimmäistä tiiltä, aloitamme kohdasta (0,0)
koordinaatit. Piirrämme sitten vaakaviivan (100,0)
ja pystysuora viiva (100,30)
ja lopuksi piirrä vaakasuora viiva (0,30)
. Käytimme h-100
komennon viimeisellä rivillä, mutta se on vastaava H0
, joka on kaksi tavua viiden sijasta. Voimme korvata kaksi samanlaista esiintymää ja pareerata koodimme <path>
tähän asti:
<path d="M0 0h100v30H0 M0 40h45v30H0 M55 40h55v30H55"/>
Toiset 9 tavua leikattu pois – kuinka paljon pienemmäksi voimme mennä?
Siltaus (-5B, yhteensä 48B)
Pisimmät täysin optimoidun SVG-mallin tiellämme olevat komennot ovat "siirrä" -komennot, jotka vievät vastaavasti 4, 5 ja 6 tavua. Yksi rajoituksistamme on seuraava:
Polkutietosegmentin (jos sellainen on) täytyy alkaa "moveto"-komennolla.
Mutta ei se mitään. Ensimmäinen on joka tapauksessa lyhin. Jos vaihdamme rivejä, voimme saada sellaisen polun määritelmän, jossa meidän tarvitsee vain liikkua joko vaaka- tai pystysuunnassa tiilien välillä. Mitä jos voisimme käyttää h
ja v
komennot siellä sen sijaan M
?
Yllä oleva kaavio näyttää, kuinka kolme muotoa voidaan piirtää yhdellä polulla. Huomaa, että hyödynnämme sitä tosiasiaa, että fill
toiminta sulkee automaattisesti avoimen osan välillä (110,0)
ja (0,0)
. Tällä uudelleenjärjestelyllä siirsimme myös raon täysleveän tiilen vasemmalle puolelle toisessa rivissä. Tältä koodi näyttää edelleen yhdeksi lohkoksi riviä kohden:
<path d="M0 0v30h50V0 h10v30h50 v10H10v30h100V0"/>
Varmasti olemme löytäneet ehdottoman pienimmän ratkaisun nyt, kun olemme pudonneet 48 tavuun, eikö?! Hyvin…
Numeroiden leikkaus (-4B, yhteensä 44B)
Jos voit olla hieman joustava mittojen kanssa, meillä on toinen pieni tapa optimoida SVG-kuvioita. Olemme työskennelleet tiilen leveydellä 100
pikseliä, mutta se on kolme tavua. Muuttaa sen muotoon 90
tarkoittaa yhden tavun vähemmän aina, kun meidän on kirjoitettava se. Samalla tavalla käytimme aukkoa 10
pikseliä – mutta jos muutamme sen 8
sen sijaan tallennamme tavun jokaisesta esiintymisestä.
<path d="M0 0v30h45V0 h8v30h45 v8H8v30h90V0"/>
Tämä tarkoittaa tietysti myös sitä, että meidän on säädettävä kuvion mitat vastaavasti. Tässä on lopullinen optimoitu SVG-mallikoodi:
<pattern id="p" width="98" height="76" patternUnits="userSpaceOnUse"> <path d="M0 0v30h45V0h8v30h45v8H8v30h90V0"/>
</pattern>
Yllä olevan katkelman toinen rivi - sisennyksiä lukuun ottamatta - on 44 tavua. Pääsimme tänne 197 tavusta kuudessa iteraatiossa. Se on jämäkkä Koko pienennys 77.7 %!
Ihmettelen kuitenkin… onko tämä todella pienin mahdollinen koko? Olemmeko tarkastelleet kaikkia mahdollisia tapoja optimoida SVG-malleja?
Kehotan sinua kokeilemaan ja pienentämään tätä koodia edelleen tai jopa kokeilemaan vaihtoehtoisia menetelmiä SVG-kuvioiden optimoimiseksi. Haluaisin nähdä, voisimmeko löytää todellisen globaalin minimin joukon viisaudella!
Lisää SVG-kuvioiden luomisesta ja optimoinnista
Jos olet kiinnostunut oppimaan lisää SVG-mallien luomisesta ja optimoinnista, lue artikkelini aiheesta luoda kuvioita SVG-suodattimilla. Tai jos haluat tutustua 60+ kuvion galleriaan, voit tarkastella PetitePatterns CodePen Collection. Lopuksi, olet tervetullut katsomaan opetusohjelmani YouTubessa auttaa sinua pääsemään entistä syvemmälle SVG-kuvioihin.
SVG-kuvioiden optimointi niiden pienimpään kokoon alun perin julkaistu CSS-temppuja. Sinun pitäisi hanki uutiskirje.
- "
- 10
- 100
- 77
- 9
- 98
- Meistä
- absoluuttinen
- Tili
- lisä-
- Kaikki
- Salliminen
- jo
- Toinen
- lähestymistapa
- ALUE
- artikkeli
- attribuutteja
- saatavissa
- AKSELIT
- Bitti
- Musta
- haaste
- muuttaa
- suljettu
- koodi
- Yhteinen
- liitäntä
- sisältää
- pitoisuus
- koordinoida
- voisi
- Luominen
- Nykyinen
- tiedot
- syvempää
- alas
- päättyy
- vakiintunut
- kaikki
- esimerkki
- Paitsi
- kokeilu
- Vihdoin
- Etunimi
- sovittaa
- virtaus
- löytyi
- edelleen
- kuilu
- saada
- Global
- ottaa
- korkeus
- auttaa
- tätä
- Korostettu
- Miten
- HTTPS
- tunnistaa
- kuva
- sisältää
- mukana
- IT
- itse
- tunnettu
- vuotaa
- OPPIA
- oppinut
- vipuvaikutuksen
- linja
- vähän
- Katsoin
- rakkaus
- TEE
- Tekeminen
- onnistui
- matematiikka
- mielessä
- lisää
- eniten
- liikkua
- MS
- numero
- numerot
- offset
- Okei
- avata
- optimoitu
- muuten
- Kuvio
- fyysinen
- Kohta
- asemoitu
- mahdollinen
- voimakas
- aika
- hinta
- prosessi
- tarjoaa
- laatu
- kierros
- juoksu
- Said
- saumaton
- Sarjat
- setti
- muodot
- samankaltainen
- Yksinkertainen
- SIX
- Koko
- So
- ratkaisu
- jotain
- Tila
- Kaupallinen
- Alkaa
- alkaa
- Tuetut
- puhuminen
- Kautta
- ylin
- läpinäkyvä
- opetusohjelmat
- käyttää
- arvo
- Näytä
- W3
- Katso
- tervetuloa
- Mitä
- sisällä
- ilman
- Referenssit
- työskentely
- toimii
- arvoinen
- youtube