10 Gyldne regler for responsive SVGs

Sep 16, 2025

hvordan

[1. 3]

De mange fordelene med SVG - inkludert uendelig skalerbare vektorbilder, små filstørrelser og direkte integrasjon med DOM - gjør det til en naturlig passform for Responsivt webdesign . Til tross for at SVG-spesifikasjonen er et tiår gammelt, er det relativt nylig støtte i mange nettlesere og verktøy betyr at det fortsatt er en rekke triks, smutthull og guttchas som får ut selv erfarne webdesignere og utviklere.

Her har jeg oppsummert det viktigste av disse som 10 gyldne regler.

01. Sett opp verktøyene dine riktig

Akkurat som en håndverkere skarper sine verktøy før du begynner å jobbe, må alle som jobber med SVG sette sine søknader opp for å levere vektorformat i den mest effektive og optimaliserte metoden som er mulig. Det er en rekke innstillinger å implementere.

Først, med mindre det er overbevisende grunner til å gjøre ellers, må du sette målinger til "piksler" i vektorverktøyet ditt. Mens det ikke betyr noe for SVG (som vil måle ViewBox. og elementer lykkelig i nesten hvilket som helst målesystem) det er fornuftig å utvikle SVG-tegningen ved hjelp av vanlige CSS-enheter, i stedet for utskriftsstandarden i tommer; og det gjør det også mye lettere å legge til @media spørringer og andre inngrep senere.

Ikke gjør lerretområdet noe større enn det må være. Som Bitmap-bilder, vil alle "tomme mellomrom" i SVG ikke bli brukt, og er best substituert med CSS-marginer. Merk at mange vektorverktøy, som skisse, vil automatisk "beskjære" lerretområdet til utvalgte elementer.

På samme tid, ikke beskjære lerretområdet til de nøyaktige kantene av elementene. Antialiasing vil fortsatt bli brukt på SVG, og kutte den for nær kan også beskjære antialiasing. I stedet, la minst 2px klare hvor kanten på lerretet kommer nær et element.

Responsiveness og ytelse er nært beslektet, så sett desimalpresisjonen for ikke å være mer enn to poeng. SVG tror ikke i heltall, så et vektorpunkt kan ha en verdi på 1.45882721px. Denne ekstreme presisjonen er helt unødvendig, og legger bare til kodeblåst og filstørrelse, så det er bedre å avkorte det på dette punktet.

På samme måte, tegne vektorformer med så få poeng som mulig. Mange nye designere antar at flere poeng er bedre, når omvendt er faktisk sant: noen få poeng, plassert godt, gir større kontroll over et element, samtidig som det reduserer filstørrelsen.

Hvis du får vektorfiler som ikke følger denne regelen, ikke bekymre deg - de fleste Vector Art. Programmer har et "forenkle" alternativ du kan bruke til å redusere antall poeng i et element uten å endre sin form. Alternativt, for detaljert arbeid, vil jeg foreslå et plugin som Astute Graphics 'VectorScribe.

02. Fjern høyde og breddeattributter

De fleste apper legger til mye proprietær, unødvendig kode i deres SVG-eksport. Den eneste nødvendige koden i starten av de fleste SVG-filer er følgende:

 & lt; SVG XMLNS = "http://www.w3.org/2000/svg" Viewbox = "0 0 500 500" & gt;
& lt;! - SVG kode her - & gt;
& lt; / svg & gt;

For våre formål er det viktigste aspektet fjerningen av bredde og høyde Attributter som de fleste applikasjoner inkluderer automatisk. Dette gjør SVG fullt responsivt i moderne nettlesere.

Hvis du behandler mange SVGs, eller er i et rush, trenger du ikke å fullføre dette trinnet for hånden. I stedet kan du følge forslagene som er lagt ut i den tredje gyldne regelen ...

03. Optimaliser og minifiser SVG-utgang

A combination of intelligent hand-editing and post-production optimisation can reduce SVG file sizes markedly — En kombinasjon av intelligent håndredigering og optimalisering etter produksjon kan redusere SVG-filstørrelser markant

Uansett hvilket verktøy du bruker til å lage ditt SVG-innhold, er det fortsatt verdt å behandle sin produksjon gjennom et verktøy som Svgomg. , som vil trimme koden markant. Vanligvis kan du spare rundt 20 til 80 prosent i filstørrelsen. Samme kode kan integreres lokalt som en gulp eller grunt oppgave .

04. Endre kode for IE

Regel 2 nevnte at korrekt optimaliserte SVGs er fullt responsive i moderne nettlesere. Det er sant hvis vi teller Microsoft Edge som en moderne nettleser. For IE 9-11 har vi noen problemer for å adressere. Hvis vi bruker SVG som et bilde:

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

Vi kan tvinge IE9-11 for å vise bildet riktig med CSS-attributtvelgeren:

 img [src $ = ". SVG"] {bredde: 100%;}

SVG-bilder fungerer godt i generell produksjon, men har begrenset interaktivitet: De fleste nettlesere vil ignorere interaktivitet og animasjon inne i en SVG plassert på en side som en . I tillegg er SVG-bilder en ekstra HTTP-forespørsel for nettleseren.

Av disse og andre grunner blir SVG i økende grad brukt inline. I så fall trenger SVG-koden litt mer behandling for IE:

 & lt; body & gt;
...
& lt; SVG XMLNS = "http://www.w3.org/2000/svg" Viewbox = "0 0 525 365" PreservaspectRatio = "XMidymin Slice" & gt;

I tillegg til det PreservaspectRatio. attributt, det vil si litt mer veiledning for å bevare riktig skalering av bildet: Ta bredden på SVG ( 365. I dette tilfellet), del det med høyden ( 525. ) og multipliser resultatet med 100 prosent. Dette blir det polstring-bunn Verdi for SVG, "Proping" den åpen nok i IE for å vise SVG i riktig aspektforhold:

 & lt; body & gt;
...
& lt; SVG XMLNS = "http://www.w3.org/2000/svg" Viewbox = "0 0 525 365"
PreservaspectRatio = "XMidymin Slice"
Style = "Bredde: 100%; Padding-bunn: 69.52%; Høyde: 1px; Overflow: Synlig" & GT,

Legg merke til at for å holde ting konsis og klare, inkluderer kodeksene i resten av denne artikkelen ikke disse endringene. Amelia Bellamy-Roors har skrevet en Utmerket artikkel om skalering SVG .

05. Vurder SVG for helt tekst

Using SVG for hero text means it will automatically scale in line with its container — Bruke SVG for helt tekst betyr at den automatisk skal skaleres i tråd med dens beholder

Det er for øyeblikket ingen CSS-standard for å dimensjonere tekst til beholderen. Det er mulig å skalere tekst ved hjelp av VW-enheter, men det vil nesten alltid kreve minst to medieforespørselsintervensjoner for å "klemme" teksten på bestemte visningsgrenser. SVG-teksten vil imidlertid endre størrelsen på en beholder automatisk:

 & lt; header & gt;
& lt; SVG XMLNS = "http://www.w3.org/2000/svg" Viewbox = "0 0 285 80" & gt;
& lt; tekst x = "0" y = "66" & gt; kauai & lt; / text & gt;
& lt; / svg & gt;
& lt; / header & gt;

CSS:

 Header SVG Tekst {
font-vekt: 900; FONT-STØRRELSE: 90PX; fyll: blå;
}

Å holde SVG Inline bevarer tilgjengelighet og SEO-verdi, og lar teksten bli stylet ved hjelp av en hvilken som helst skrift som allerede er innebygd på siden. Se her for mer informasjon.

06. Legg bredde og høyde på plass for progressive ikoner

A non-scaling-stroke line has been applied to this speech bubble so it will not change in width when the viewport is resized — En ikke-skalerings-stroke linje har blitt brukt på denne taleboblen, slik at den ikke endres i bredden når visningsporten er endret

Ett unntak til regel 2 er ikoner og små logoer, som skal beholde deres bredde og høyde attributter hvis du vil at de skal bli gradvis forbedret:

 & lt; a href = "http://codepen.io" & gt;
    & lt; SVG rolle = "img" Aria-label = "Codepen" bredde = "50" høyde = "50" & gt;
        & lt; title & gt; codepen & lt; / title & gt;
        & lt; bruk xlink: href = "# codepen" / & gt;
    & lt; / svg & gt;
& lt; / a & gt;
...
& lt; SVG Style = "Display: Ingen;" & gt;
    & lt; symbol id = "codepen" Viewbox = "0 0 50 50" & gt;
        & lt; bane d = "..." / & gt;
    & lt; / symbol & gt;
& lt; / svg & gt;

Du kan se et eksempel på denne teknikken i aksjon her .

Hvis vi bare størrelser SVG-ikonene med CSS, og nettstedets stilark ikke laster, vil ikonene vises på standardstørrelsen på et erstattet element: 300px x 150px. Ved å holde høyden og bredden som attributter, kan vi si at de nærmeste rimelig berøringsstørrelse som standard, og bruk våre CSS for å forbedre måten de presenteres på.

07. Bruk vektor-effekter for å holde hairlines tynn

SVG skaler som standard alt med visningsporten, inkludert slagtykkelse. Vanligvis fungerer dette bra, men i noen tilfeller - Diagrammer og slag påføres som effekter på utsiden av teksten spesielt - du vil kanskje holde streker samme tykkelse, uansett hvilken størrelse på tegningen. Dette er domenet til det lite kjente vektor-effekt Eiendom, som kan brukes som presentasjonsattributt eller i CSS:

 sti {
    fyll: #fff; Stroke: # 111;
    Strokebredde: 2;
    Vector-effekt: ikke-skalering-stroke;
}

Se på Et fullt eksempel på denne teknikken .

08. Husk bitmaps

Mange utviklere antar at SVG kun kan bruke vektorer, men JPEG og PNGs kan også brukes på en SVG-tegning. Og så lenge du har fulgt mine regler så langt, vil disse bildene være lydhør når du legger til en bitmap via stikkord:

 [1024 "Høyde =" 768 "XLINK: HREF =" Lake-louise.jpg "x =" 1300 "y =" 150 "rolle =" Image "title =" Crowsnest Pass "& GT; & lt; / image & gt;

09. Vurder adaptive løsninger

Den klassiske Coca-Cola-logoen gjengitt på forskjellige adaptive størrelser

Å gjøre ting går "squish" er bare en del av responsiv design. Hva RWD handler om, i den større følelsen av adaptiv design, presenterer passende innhold på alle visningsportstørrelser.

Dette kan oppnås på en rekke måter. ResponsiveLogos.co.uk gir en rekke eksempler som bruker SVG sprites, men jeg foretrekker å integrere medieforespørsler i SVG for å lage det jeg kaller 'Branding Modules'. Denne tilnærmingen gjør at jeg kan legge til, fjerne og modifisere konkurransen til komponenter. Les mer om Adaptive Branding Modules i artikkelen min .

Denne samme teknikken kan brukes til diagrammer, illustrasjoner, kart og mer. I de enkleste modulene kan CSS selv skrives inn i SVG, noe som gjør den brukbar overalt, som beskrevet i forrige regel.

10. Integrer medieforespørsler i SVG

Mange mennesker vet ikke at CSS medieforespørsler kan skrives inn i SVG selv:

 & lt; SVG XMLNS = "http://www.w3.org/2000/svg" Viewbox = "14 82 272 139" & gt;
& lt; defs & gt;
& lt; Style & gt;
SVG G {Overgang: 1S; }
@media alle og (maks bredde: 90rem) {
#Drink, #Coke {opacity: 0; }
}
& lt; / style & gt;
& lt; / defs & gt;
& lt; g id = "coca-cola" & gt;
& lt; bane d = "m109.6 ... & gt;

Det er viktig å merke seg at medieforespørselen bare kan "se" elementet det er inne i: det vil si at enhver måling relaterer seg til selve elementet, ikke siden. En potensiell ulempe av denne tilnærmingen er at lerretområdet på SVG alltid vil forbli det samme, i forhold til elementene i den.

Dette kan resultere i svært små elementer i små visningsstørrelser, innrammet i et relativt stort lerretområde. Det er flere løsninger på dette, inkludert Endre størrelse på ViewBox. og Skal opp elementene for å kompensere .

Konklusjon

Den uendelige skalerbarheten til SVG er den største aktiva, men en funksjon som fortsatt er noe undervurdert av nettlesere og vektorgrafikredaktører. Ved å integrere disse retningslinjene i produksjons arbeidsflyten og kommunisere dem til andre i teamet ditt, kan du skape jevnt responsivt SVG for nettet, noe som gjør den til en del av eiendelene du bruker i utviklingen hver dag.

Denne artikkelen opprinnelig dukket opp i Net Magazine. utgave 283; Kjøp det her !

Relaterte artikler:

12 må-ha kode testing verktøy
Skarpe dine skisseferdigheter
Supercharge SVG animasjoner med GSAP

10 Gyldne regler for responsive SVGs

01. Sett opp verktøyene dine riktig

02. Fjern høyde og breddeattributter

03. Optimaliser og minifiser SVG-utgang

04. Endre kode for IE

05. Vurder SVG for helt tekst

06. Legg bredde og høyde på plass for progressive ikoner

07. Bruk vektor-effekter for å holde hairlines tynn

08. Husk bitmaps

09. Vurder adaptive løsninger

10. Integrer medieforespørsler i SVG

Konklusjon

hvordan - Mest populære artikler

Skyoppbevaring for bilder og bilder: Hvordan velge den beste skyen for arbeidet ditt

Hvordan skrive HTML-kode raskere

Slik maler du fargerik animasjonskunst i Photoshop

Lær å bli løvverk med X-partikler

Hvordan male en zombie i Clip Studio Paint

Hvordan skape overbevisende øyne i Zbrush

Hvordan bevege seg mellom Daz Studio og Zbrush

Hvordan forbedre ytelsen til e-handelsplasser

Kategorier