10 Kultaiset säännöt reagoivista SVGS: stä

Sep 11, 2025

Miten tehdään

SVG: n monet edut - mukaan lukien äärettömän skaalautuvat vektorikuvat, pienet tiedostokoot ja suora integraatio Dom - tekevät siitä luonnollisen sopimuksen Vastaava web-suunnittelu . Huolimatta SVG-spesifikaatiosta on vuosikymmenen vanha, se on suhteellisen äskettäin tuettu monissa selaimissa ja työkaluissa tarkoittaa vielä useita temppuja, porsaanreikiä ja gotchia, jotka saavat jopa kokeneita web-suunnittelijoita ja kehittäjiä.

Tässä olen tiivistänyt tärkeimmät näistä 10 kultaisista säännöistä.

01. Aseta työkalut oikein

Aivan kuten käsityöläinen teroittaa työkalujaan ennen työn aloittamista, kuka tahansa, joka työskentelee SVG: n kanssa, on asetettava sovelluksensa toimittamaan vektorimuodon tehokkaimmalla ja optimoidulla menetelmällä. On olemassa useita asetuksia.

Ensinnäkin, ellei ole pakottavia syitä tehdä muutoin, aseta mittaukset "pikseleihin" vektorityökaluun. Vaikka SVG: lle ei ole väliä (mikä mittaa Viewbox ja elementtejä onnellisesti lähes millä tahansa mittausjärjestelmällä) On järkevää kehittää SVG-piirustusta käyttäen tavallisia CSS-yksiköitä eikä tuumaa oletusarvoa; Ja se helpottaa myös paljon @Media Kyselyt ja muut toimet myöhemmin.

Älä tee kangasaluetta suurempia kuin sen täytyy olla. Kuten bittikarttakuvia, SVG: n "tyhjää tilaa" ei käytetä, ja se on parhaiten substituoitu CSS-marginaaleilla. Huomaa, että monet vektorityökalut, kuten luonnos, automaattisesti "viljely" kangasalueelle valittuihin elementteihin.

Samaan aikaan älä rajoita kangasaluetta elementtien tarkkoihin reunoihin. Antialiasointia sovelletaan edelleen SVG: hen ja leikkaamalla se liian lähellä voi myös rajata antialiasing. Sen sijaan jätä vähintään 2px kirkas, missä kanavan reuna on lähellä elementtiä.

Vastaavuus ja suorituskyky ovat läheisesti yhteydessä toisiinsa, joten desimaalin tarkkuus on enintään kaksi pistettä. SVG ei ajattele kokonaislukuissa, joten vektoripiste voi olla arvo 1,45882721px. Tämä äärimmäinen tarkkuus on täysin tarpeetonta, ja lisää vain koodin bloat ja tiedostokoko, joten se on parempi lyhentää sitä tässä vaiheessa.

Vastaavasti vedä vektori-muotoja käyttämällä mahdollisimman vähän pisteitä. Monet uudet suunnittelijat olettavat enemmän pisteitä on parempi, kun päinvastoin on totta: muutamia kohtia, jotka on sijoitettu hyvin, antavat suuremman hallinnan elementin päälle samalla kun se vähentää myös tiedostokokoa.

Jos sinulla on vektoritiedostoja, jotka eivät noudata tätä sääntöä, älä huoli - useimmat vektovekniikka Sovelluksissa on "Yksinkertaistaminen" -vaihtoehto, jonka avulla voit vähentää pisteiden määrää elementissä muuttamatta sen muotoa. Vaihtoehtoisesti yksityiskohtainen työ ehdotti plugin, kuten älykäs grafiikka "Vectorbe.

02. Poista korkeus ja leveysominaisuudet

Useimmat sovellukset lisäävät paljon omistusta, tarpeettomia koodia SVG-viennissä. Ainoa vaadittu koodi useimpien SVG-tiedostojen alussa on seuraava:

 & lt; svg xmlns = "http://www.w3.org/2000/SVG" Viewbox = "0 0 500 500" & gt;
& lt;! - SVG-koodi täällä - & GT;
& lt; / svg & gt;

Meidän tarkoituksemme tärkein näkökohta on poistaminen leveys ja korkeus Attribuutit, joita useimmat sovellukset sisältävät automaattisesti. Tämä tekee SVG: n täysin reagoivan nykyaikaisiin selaimiin.

Jos käsittelet paljon SVGS: tä, tai olet kiire, sinun ei tarvitse suorittaa tätä askelta käsin. Sen sijaan voit seurata kolmannen kultaisen säännön ehdotuksia ...

03. Optimoi ja muistaa SVG-lähtö

A combination of intelligent hand-editing and post-production optimisation can reduce SVG file sizes markedly — Älykäs käsi-muokkauksen ja jälkeisen tuotannon optimoinnin yhdistelmä voi vähentää SVG-tiedostokokoja merkittävästi

Riippumatta siitä, mitä työkalu, jota käytät SVG-sisällön luomiseen, kannattaa käsitellä sen tuotoksen käsittelyä työkalun kautta Svgomg , joka leikata koodi selvästi. Tyypillisesti voit säästää noin 20 - 80 prosenttia tiedostokokoon. Sama koodi voidaan integroida paikallisesti Gulp tai Grunt-tehtävänä .

04. Muokkaa koodia IE: lle

Sääntö 2 mainittiin, että oikein optimoidut SVG: t ovat täysin reagoivia nykyaikaisissa selaimissa. Se on totta, jos laskemme Microsoft Edge moderniksi selaimeksi. IE 9-11: lle meillä on muutamia ongelmia. Jos käytämme SVG: tä kuvana:

 & lt; img src = "countdown.svg alt =" countdown "& gt;

Voimme pakottaa IE9-11 näyttämään kuvan oikein CSS-attribuutinvalitsimen avulla:

 IMG [SRC $ = ". SVG"] {Leveys: 100%;}

SVG-kuvat toimivat hyvin yleisesti tuotannossa, mutta niillä on rajallinen vuorovaikutteisuus: useimmat selaimet sivuuttavat vuorovaikutteisuutta ja animaatiota SVG: n sisällä sijoitetaan sivulle . Lisäksi SVG-kuvat ovat selaimeen ylimääräinen HTTP-pyyntö.

Näistä ja muista syistä SVG: tä käytetään yhä enemmän Inline. Tällöin SVG-koodi tarvitsee hieman enemmän kohtelua eli:

 & lt; body & gt;
...
& lt; svg xmlns = "http://www.w3.org/2000/SVG" Viewbox = "0 0 525 365" CLANESSEASPTRATIO = "Xmidymen Slice" & GT;

Lisäksi ResidentEaspectratio attribuutti eli tarvitsee hieman enemmän ohjausta kuvan oikean skaalauksen säilyttämiseksi: Ota SVG: n leveys ( 365 tässä tapauksessa jakavat sen korkeudella ( 525 ) Ja kerro tulos 100 prosenttia. Tämä tulee padding-pohja SVG: n arvo, "Propping" se on riittävän avoinna eli SVG: n näyttämiseksi oikeassa kuvasuhteessaan:

 & lt; body & gt;
...
& lt; svg xmlns = "http://www.w3.org/2000/SVG" Viewbox = "0 0 525 365"
CONVERNALEASECTRATIO = "XMidymen Slice"
Style = "Leveys: 100%; Padding-pohja: 69,52%; Korkeus: 1px; ylivuoto: näkyvä" & gt;

Huomaa, että jotta asiat pitävät ynnäkkää ja selkeää, koko tämän artikkelin koodin näytteet eivät sisällä näitä muutoksia. Amelia Bellamy-Royds on kirjoittanut Erinomainen artikkeli skaalaus SVG .

05. Harkitse SVG sankari-tekstiin

Using SVG for hero text means it will automatically scale in line with its container — Hero-tekstin SVG: n käyttäminen tarkoittaa sitä automaattisesti säiliönsä mukaisesti

Tällä hetkellä ei ole CSS-standardi tekstin kokoalle säiliöön. On mahdollista skaalata tekstiä VW-yksiköillä, mutta se vaatii aina ainakin kaksi mediakyselyn interventioita "puristin" tekstin tiettyihin nähden. SVG-teksti kokoontuu kuitenkin astiaan automaattisesti:

 & lt; otsikko & gt;
& lt; svg xmlns = "http://www.w3.org/2000/SVG" Viewbox = "0 0 285 80" & gt;
& lt; teksti x = "0" y = "66" & gt; kauai & lt; / Text & GT;
& lt; / svg & gt;
& lt; / otsikko & gt;

CSS:

 Otsikko SVG Text {
fonttipaino: 900; Fontti-koko: 90px; Täytä: sininen;
}

SVG-inlinein säilyttäminen säilyttää esteettömyys ja SEO-arvo ja mahdollistaa tekstin muotoilun käyttämällä mitä tahansa fonttia, joka on jo upotettu sivulle. Nähdä tässä Lisätietoja.

06. Jätä leveys ja korkeus asteittaisille kuvakkeille

A non-scaling-stroke line has been applied to this speech bubble so it will not change in width when the viewport is resized — Tätä puhekuplalle on sovellettu ei-skaalaus-aivohalvauslinja, joten se ei muutu leveys, kun näkymäportointi

Yksi poikkeus sääntöön 2 on kuvakkeet ja pienet logot, joiden pitäisi säilyttää niiden leveys ja korkeus attribuutit, jos haluat niiden asteittain parantaa:

 & lt; href = "http://codepen.io" & gt;
    & lt; svg rooli = "img" aria-etiketti = "Codepen" leveys = "50" korkeus = "50" & gt;
        & lt; otsikko & gt; codepen & lt; / otsikko & gt;
        & lt; Käytä Xlink: href = "# codepen" / & gt;
    & lt; / svg & gt;
& lt; / a & gt;
...
& lt; svg style = "Näyttö: Ei mitään;" & gt;
    & lt; symboli id = "Codepen" Viewbox = "0 0 50 50" & gt;
        & lt; polku d = "..." / & gt;
    & lt; / symboli & gt;
& lt; / svg & gt;

Näet esimerkin tästä tekniikasta toiminnassa tässä .

Jos koossa vain SVG-kuvakkeet CSS: llä ja sivuston tyylilevy ei lataudu, kuvakkeet näkyvät korvatun elementin oletuskokoon: 300px x 150px. Kun pidät korkeuden ja leveyden attribuutteina, voimme koota ne lähimpään kohtuulliseen kosketuskokoon oletusarvoisesti ja käyttää CSS: tä tehostamaan sitä, miten ne esitetään.

07. Käytä vektori-vaikutuksia pitämään hairlinesit ohut

Oletusarvoisesti SVG vaa'at kaikki näkymäportilla, mukaan lukien iskun paksuus. Yleensä tämä toimii hienoina, mutta joissakin tapauksissa - kaaviot ja aivohalvaukset ovat vaikutuksia erityisesti tekstin ulkopuolelle - saatat haluta pitää samaan paksuuteen, riippumatta siitä, mikä piirustuksen koko. Tämä on pienen tiedossa olevan verkkotunnuksen vektori-vaikutus omaisuutta, jota voidaan soveltaa esitysmääritteeksi tai CSS: ssä:

 polku {
    Täytä: #FFF; Aivohalvaus: # 111;
    Aivohalvaus leveys: 2;
    Vector-vaikutus: ei-skaalaus;
}

Katso täysi esimerkki tästä tekniikasta .

08. Muista bittikartat

Monet kehittäjät olettavat, että SVG voi käyttää vain vektoreita, mutta JPEGS ja PNG: t voidaan soveltaa myös SVG-piirustukseen. Ja niin kauan kuin olet seurannut sääntöjä toistaiseksi, nämä kuvat ovat reagoivia, kun lisäät bittikartta tag:

 & lt; image width = "1024" korkeus = "768" Xlink: href = "" järvi-louise.jpg "x =" 1300 "y =" 150 "rooli =" kuva "otsikko =" Crowsnest Pass "& GT; & lt; / image & gt;

09. Harkitse mukautuvia ratkaisuja

Klassinen Coca-Cola-logo teki erilaisilla mukautuvilla kooilla

Tehdä asioita "Squish" on vain yksi osa reagoivaa muotoilua. Mitä RWD on, suuremmassa sopeutumismuodossa esitellä sopivaa sisältöä kaikilla näkymänpaikoissa.

Tämä voidaan saavuttaa useilla eri tavoilla. Responsevelogos.co.uk tarjoaa useita esimerkkejä, jotka käyttävät SVG Sprites, mutta mieluummin integroida mediakyselyt SVG: hen luomaan, mitä kutsun "branding-moduuleiksi". Tämä lähestymistapa antaa minun lisätä, poistaa ja muuttaa komponenttien näkyvyyttä. Lue lisää Adaptive Branding -moduulista Artikkelissani .

Tätä samaa tekniikkaa voidaan käyttää kaavioihin, kuvioihin, karttoihin ja muihin. Yksinkertaisimmissa moduuleissa itse CSS voidaan kirjoittaa SVG: n sisällä, joten se on käyttökelpoinen kaikkialla, kuten edellisessä säännössä kuvataan.

10. Integroida mediakyselyt SVG: hen

Monet ihmiset eivät tiedä, että CSS-mediakyselyt voidaan kirjoittaa SVG: n sisällä:

 & lt; svg xmlns = "http://www.w3.org/2000/SVG" Viewbox = "14 82 272 139" & gt;
& lt; defs & gt;
& lt; tyyli & gt;
SVG G {siirtyminen: 1S; }
@Media kaikki ja (max-leveys: 90rem) {
#Drink, #coke {opasiteetti: 0; }
}
& lt; / tyyli & gt;
& lt; / defs & gt;
& lt; g id = "Coca-cola" & gt;
& lt; polku d = "M109.6 ... & gt;

On tärkeää huomata, että mediakysely voi "nähdä" elementti, joka on sisällä: eli mikä tahansa mittaus liittyy itse elementtiin, ei sivu. Yksi lähestymistapa on se, että SVG: n kankaasualue pysyy aina samana suhteessa sen sisällä oleviin elementteihin.

Tämä voi johtaa pieniin pieniin elementteihin pienissä näkymäkokoissa, kehystetään suhteellisen suurella kankaalle. Tässä on useita ratkaisuja, mukaan lukien Viewboxin asentaminen ja elementtien skaalaaminen korvaamaan .

Johtopäätös

SVG: n ääretön skaalautuvuus on sen suurin voimavara, mutta ominaisuus, joka on vielä hieman pienentynyt selaimilla ja vektorigrafiikoilla toimittajilla. Integroimalla nämä ohjeet tuotantotyöhön ja kommunikoi ne muille tiimisi, voit luoda sujuvasti reagoivaa SVG: tä verkkoon, joten se on osa kehityksessä käytettäviä varoja joka päivä.

Tämä artikkeli oli alun perin ilmestynyt Net-aikakauslehti numero 283; Osta se täällä !

Aiheeseen liittyvät artikkelit:

12: n on oltava koodin testaustyökalut
Terävöittää luonnostaan taitoja
SuperCare SVG-animaatiot GSAP: llä

10 Kultaiset säännöt reagoivista SVGS: stä

01. Aseta työkalut oikein

02. Poista korkeus ja leveysominaisuudet

03. Optimoi ja muistaa SVG-lähtö

04. Muokkaa koodia IE: lle

05. Harkitse SVG sankari-tekstiin

06. Jätä leveys ja korkeus asteittaisille kuvakkeille

07. Käytä vektori-vaikutuksia pitämään hairlinesit ohut

08. Muista bittikartat

09. Harkitse mukautuvia ratkaisuja

10. Integroida mediakyselyt SVG: hen

Johtopäätös

Miten tehdään - Suosituimmat artikkelit

Kuinka tehdä käsivarsi

Kuinka ratkaista hankala suunnittelu lyhyt

Luo hehkuva neon-tekstin vaikutus

Affinity Designer: Viennin käyttäminen

Digitaalisten varojen luominen

Kuinka luoda karvainen sarjakuvahahmo

Level up-pelimerkit luovalla kokoonpanolla

Kuinka hallita ihon varjostus 3D

Luokat