10 Gyllene regler för responsiva SVGS

Sep 13, 2025

Hur

De många fördelarna med SVG - inklusive oändligt skalbara vektorbilder, små filstorlekar och direktintegration med DOM - gör det till en naturlig passform för Responsiv webbdesign . Trots SVG-specifikationen som ett årtionde är det relativt nyligen support i många webbläsare och verktyg innebär att det fortfarande finns ett antal knep, smutthullar och gotchas som fångar ut även erfarna webbdesigners och utvecklare.

Här har jag sammanfattat det viktigaste av dessa som 10 gyllene regler.

01. Ställ in dina verktyg korrekt

Precis som en hantverkare skärper sina verktyg innan de börjar arbeta, måste någon som arbetar med SVG ställa in sina applikationer för att leverera vektorformat i den mest effektiva och optimerade metoden. Det finns ett antal inställningar att implementera.

Först, om inte det finns tvingande skäl att annars gör mätningar till "pixlar" i ditt vektorverktyg. Medan det spelar ingen roll för SVG (vilket kommer att mäta visningskorg och element som är lyckligtvis i nästan vilket mätsystem som helst) är det vettigt att utveckla SVG-ritningen med vanliga CSS-enheter, snarare än utskriftsavgiften av tum; och det gör det också mycket lättare att lägga till @media Frågor och andra ingrepp senare.

Gör inte dukområdet som är större än vad det behöver vara. Liksom Bitmap-bilder kommer alla "tomma utrymmen" i SVG inte att användas, och är bäst ersatt med CSS-marginaler. Observera att många vektorverktyg, som skiss, automatiskt "gröda" kanfasområdet till valda element.

Samtidigt beskära inte dukområdet till de exakta kanterna av element. Antialiasing kommer fortfarande att appliceras på SVG, och skär den för nära kan också beskära med antialiaseringen. Istället, lämna minst 2px klart varhelst kanten på duken kommer nära ett element.

Responsiveness och prestanda är nära besläktade, så sätt decimal precision att vara högst två punkter. SVG tror inte i heltal, så en vektorpunkt kan ha ett värde av 1.45882721px. Denna extrema precision är helt onödig, och lägger bara till kodblåsning och filstorlek, så det är bättre att avkorta det vid denna tidpunkt.

På samma sätt, rita vektorformer med hjälp av så få poäng som möjligt. Många nya designers antar att fler poäng är bättre, när det omvända är faktiskt sant: några punkter, placeras bra, ger större kontroll över ett element, samtidigt som du reducerar filstorleken.

Om du får vektorfiler som inte följer denna regel, oroa dig inte - mest vektorkonst Applikationer har ett "förenkly" -alternativ som du kan använda för att minska antalet poäng i ett element utan att ändra sin form. Alternativt, för det detaljerat arbete jag skulle föreslå ett plugin som Astute Graphics vectorscribe.

02. Ta bort höjd- och breddegenskaper

De flesta appar lägger till en hel del proprietär, onödig kod i sin SVG-export. Den enda önskade koden i början av de flesta SVG-filer är följande:

 & lt; svg xmlns = "http://www.w3.org/2000/svg" Viewbox = "0 0 500 500" & GT;
& lt;! - SVG-kod här - & GT;
& LT; / SVG & GT;

För våra ändamål är den viktigaste aspekten avlägsnandet av bredd och höjd Attribut som de flesta applikationer är automatiskt. Detta gör SVG helt mottaglig i moderna webbläsare.

Om du behandlar många SVGs, eller är i en rush, behöver du inte slutföra detta steg för hand. Istället kan du följa de förslag som anges i den tredje gyllene regeln ...

03. Optimera och minifiera SVG-utgången

A combination of intelligent hand-editing and post-production optimisation can reduce SVG file sizes markedly — En kombination av intelligent handredigering och efterproduktionsoptimering kan minska SVG-filstorlekarna markant

Oavsett det verktyg du använder för att skapa ditt SVG-innehåll är det fortfarande värt att bearbeta sin produktion genom ett verktyg som Svgomg , som kommer att trimma koden markant. Vanligtvis kan du spara ca 20 till 80 procent i filstorlek. Samma kod kan integreras lokalt som en gulp eller grunt uppgift .

04. Ändra kod för IE

Regel 2 nämnde att korrekt optimerade SVGs är fullt mottagliga i moderna webbläsare. Det är sant om vi räknar Microsoft Edge som en modern webbläsare. För IE 9-11 har vi några problem att ta itu med. Om vi använder SVG som en bild:

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

Vi kan tvinga IE9-11 för att visa bilden korrekt med CSS-attributväljaren:

 IMG [src $ = ". Svg"] {Bredd: 100%;}

SVG-bilder fungerar bra i allmän produktion, men har begränsad interaktivitet: De flesta webbläsare kommer att ignorera interaktivitet och animering i en SVG placerad på en sida som en . Dessutom är SVG-bilder en extra HTTP-begäran för webbläsaren.

Av dessa och andra skäl används SVG alltmer inline. I så fall behöver SVG-koden lite mer behandling för IE:

 & lt; kropp & gt;
...
Svg Xmlns = "http://www.w3.org/2000/svg" Viewbox = "0 0 525 365" Preserveaspectratio = "Xmidymin Slice" & GT;

Utöver Preserveaspectratio Attribut, dvs behöver lite mer vägledning för att bevara den korrekta skalningen av bilden: Ta svgens bredd ( 365 I det här fallet) dela det med höjden ( 525 ) och multiplicera resultatet med 100 procent. Detta blir paddingbotten Värde för SVG, "Proping" det öppet tillräckligt i IE för att visa SVG i sitt korrekta bildförhållande:

 & lt; kropp & gt;
...
Svg Xmlns = "http://www.w3.org/2000/svg" Viewbox = "0 0 525 365"
PRESERVEASPECTRATIO = "XMIDYMIN SLICE"
Style = "Bredd: 100%; Padding-Bottom: 69.52%; höjd: 1px; överflöde: synlig" & gt;

Observera att, för att hålla saker som är koncisa och tydliga, innehåller kodproverna i resten av den här artikeln inte dessa ändringar. Amelia Bellamy-Roys har skrivit en Utmärkt artikel om skalning svg .

05. Tänk på SVG för hjälte text

Using SVG for hero text means it will automatically scale in line with its container — Med hjälp av SVG för hjälte-text betyder det automatiskt att skala i linje med sin behållare

Det finns för närvarande ingen CSS-standard för dimensionering av texten till dess behållare. Det är möjligt att skala text med VW-enheter, men det kommer nästan alltid att behöva minst två mediefrågor att "klämma" texten vid vissa visningsgränser. SVG-texten ändras dock automatiskt till en behållare:

 & lt; header & gt;
& lt; svg Xmlns = "http://www.w3.org/2000/svg" Viewbox = "0 0 285 80" & GT;
& LT; Text X = "0" Y = "66" & GT; Kauai & LT; / Text & GT;
& LT; / SVG & GT;
& LT; / Header & GT;

CSS:

 Header svg text {
FONT-VIKT: 900; FONT-STORLEK: 90px; Fyll: Blå;
}

Att hålla SVG-inline bevarar tillgänglighet och SEO-värde, och låter texten vara utformad med hjälp av något teckensnitt som redan är inbäddat på sidan. Ser här för mer information.

06. Lämna bredd och höjd på plats för progressiva 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 icke-skalningsstångslinje har applicerats på denna talbubbla så att den inte kommer att ändras i bredd när visningsporten är ändrad

Ett undantag från regel 2 är ikoner och små logotyper, som borde behålla sina bredd och höjd Attribut om du vill att de ska förbättras successivt:

 & lt; en href = "http://codepen.io" & gt;
    SVG ROLE = "IMG" Aria-Label = "CODEPEN" Bredd = "50" Höjd = "50" & GT;
        & LT; Titel & GT; Codepen & LT; / Titel & GT;
        & lt; använd xlink: href = "# codepen" / & gt;
    & LT; / SVG & GT;
& lt; / a & gt;
...
& lt; SVG Style = "Display: None;" & GT;
    & LT; Symbol ID = "Codepen" Viewbox = "0 0 50 50" & GT;
        & lt; väg d = "..." / & gt;
    & LT; / Symbol & GT;
& LT; / SVG & GT;

Du kan se ett exempel på denna teknik i aktion här .

Om vi bara storlekar SVG-ikonerna med CSS, och webbplatsens stilark inte laddas, kommer ikonerna att visas på standardstorleken på ett ersatt element: 300px x 150px. Genom att hålla höjden och bredden som attribut kan vi använda dem till närmaste rimliga pekstorlek som standard och använda vår CSS för att förbättra hur de presenteras.

07. Använd vektoreffekter för att hålla hairlines tunna

Som standard vågar SVG allt med visningsporten, inklusive stroke tjocklek. Vanligtvis fungerar det bra, men i vissa fall - diagram och slag som tillämpas som effekter på utsidan av texten i synnerhet - kanske du vill hålla stroke samma tjocklek, oavsett vilken storlek på ritningen. Detta är domänen för den lilla kända Vektoreffekt egendom, som kan tillämpas som ett presentationsattribut eller i CSS:

 Path {
    Fyll: #fff; Stroke: # 111;
    Stroke-bredd: 2;
    Vektor-effekt: icke-skalande stroke;
}

Ta en titt på Ett helt exempel på denna teknik .

08. Kom ihåg bitmappar

Många utvecklare antar att SVG endast kan använda vektorer, men JPEGs och PNG kan också tillämpas på en SVG-ritning. Och så länge som du har följt mina regler hittills, kommer de här bilderna att vara mottagliga när du lägger till en bitmapp via märka:

 & lt; Bildbredd = "1024" Höjd = "768" xLink: href = "Lake-louise.jpg" x = "1300" y = "150" roll = "image" title = "crowsnest passe" & gt; & lt; / Bild & GT;

09. Tänk på adaptiva lösningar

Den klassiska Coca-Cola-logotypen gjordes vid olika adaptiva storlekar

Att göra saker gå "squish" är bara en del av responsiv design. Vad RWD handlar om, i den större känslan av adaptiv design, presenterar lämpligt innehåll i alla visningsstorlekar.

Detta kan uppnås på olika sätt. ResponsiveLogos.co.uk ger en serie exempel som använder SVG Sprites, men jag föredrar att integrera medifrågor i SVG för att skapa vad jag kallar "Branding Modules". Detta tillvägagångssätt gör att jag kan lägga till, ta bort och ändra synligheten av komponenter. Läs mer om Adaptive Branding Modules I min artikel .

Samma teknik kan användas för diagram, illustrationer, kartor och mer. I de enklaste modulerna kan CSS själva skrivas inuti SVG, vilket gör det användbart överallt, som beskrivs i föregående regel.

10. Integrera medifrågor i SVG

Många människor vet inte att CSS Media Queries kan skrivas inuti SVG själv:

 & lt; svG XMLNS = "http://www.w3.org/2000/svg" Viewbox = "14 82 272 139" & GT;
& lt; defs & gt;
& lt; stil & gt;
SVG G {övergång: 1s; }
@media alla och (max-width: 90REM) {
#drink, #coke {opacity: 0; }
}
& LT; / Style & GT;
& lt; / defs & gt;
G ID = "COCA-COLA" & GT;
& lt; väg d = "M109,6 ... & GT;

Det är viktigt att notera att mediefränningen bara kan "se" det element det är inuti: det vill säga, vilket mäter som helst på själva elementet, inte sidan. En potential nackdel med detta tillvägagångssätt är att Canvas-området hos SVG alltid kommer att förbli detsamma, i förhållande till elementen inuti den.

Detta kan resultera i mycket små element i små visningsstorlekar, inramade inuti ett relativt stort dukområde. Det finns flera lösningar på detta, inklusive Ändra storlek på visningskorten och Skalar upp elementen för att kompensera .

Slutsats

Den oändliga skalbarheten hos SVG är den största tillgången, men en funktion som fortfarande är något undersökt av webbläsare och vektorgrafikredaktörer. Genom att integrera dessa riktlinjer i ditt produktionsflöde och kommunicera dem till andra i ditt lag kan du skapa smidigt mottaglig SVG för webben, vilket gör det till en del av de tillgångar du använder i utveckling varje dag.

Denna artikel uppträdde ursprungligen i nätmagasin utgåva 283; köp det här !

Relaterade artiklar:

12 måste-ha kodtestverktyg
Skärpa dina sketching färdigheter
Super CHARGE SVG Animationer med GSAP

10 Gyllene regler för responsiva SVGS

01. Ställ in dina verktyg korrekt

02. Ta bort höjd- och breddegenskaper

03. Optimera och minifiera SVG-utgången

04. Ändra kod för IE

05. Tänk på SVG för hjälte text

06. Lämna bredd och höjd på plats för progressiva ikoner

07. Använd vektoreffekter för att hålla hairlines tunna

08. Kom ihåg bitmappar

09. Tänk på adaptiva lösningar

10. Integrera medifrågor i SVG

Slutsats

Hur - Mest populära artiklar

Adobe Fresco Tutorial: Skapa ett porträtt i målningsappen

Hur man kan photoshop på iPhone (ja det är en sak)

Hur man ritar perspektiv

Bygg en AI-driven chatbot

Affinity Designer: Hur man använder begränsningar

Hur man ställer in webbplatsens teman med CSS-variabler

Måla på ett 3D-nät med ZBRUSHCORESs polyftesverktyg

Hur man ritar metalliska reflektioner

Kategorier