10 Gouden regels voor responsieve SVGS

De vele voordelen van SVG - inclusief oneindig schaalbare vectorafbeeldingen, kleine bestandsgroottes en directe integratie met de DOM - maken het een natuurlijke pasvorm voor Responsive Web Design ​Ondanks dat de SVG-specificaties een decennium oud zijn, is het relatief recente ondersteuning in veel browsers en gereedschappen betekent dat er nog steeds een aantal trucs, mazen en gotcha's zijn die zelfs ervaren webontwerpers en ontwikkelaars vangen.

Hier heb ik het meest belangrijke van deze samengevat als 10 gouden regels.

01. Stel uw gereedschappen correct in

Net zoals een vakman zijn gereedschappen verscherpt vóór het begin van het werk, moet iedereen die met SVG werkt, hun toepassingen instellen om vectorformaat te leveren in de meest efficiënte en geoptimaliseerde methode mogelijk. Er zijn een aantal instellingen om te implementeren.

Ten eerste, tenzij er dwingende redenen zijn om anders te doen, stel metingen in op 'Pixels' in je vector-tool. Hoewel het niet uitmaakt om SVG (dat de viewbox en elementen gelukkig in bijna elk meetsysteem) Het is logisch om de SVG-tekening te ontwikkelen met behulp van gemeenschappelijke CSS-eenheden, in plaats van de afdruktandinstelling van inches; en het maakt het ook veel gemakkelijker om toe te voegen @media Queries en andere interventies later.

Maak het canvasgebied niet groter dan het moet zijn. Net als bitmapafbeeldingen, zal elke 'lege ruimte' in de SVG niet worden gebruikt en is het best gesubstitueerd met CSS-marges. Merk op dat veel vectorhulpprogramma's, zoals schets, automatisch het canvasgedeelte van het canvas naar geselecteerde elementen worden gewassen.

Geef tegelijkertijd het canvasgebied niet bij aan de exacte randen van elementen. Antialiasing zal nog steeds op de SVG worden aangebracht en het te kort te sluiten kan ook de antialiasing uitsnijden. Laat in plaats daarvan minstens 2px duidelijk overal waar de rand van het canvas dicht bij een element komt.

Responsiviteit en prestaties zijn nauw verwant, dus stel de decimale precisie in om niet meer dan twee punten te zijn. SVG denkt niet in gehele getallen, dus een vectorpunt kan een waarde hebben van 1.45882721px. Deze extreme precisie is volledig onnodig en draagt ​​alleen bij aan codebloat en bestandsgrootte, dus het is beter om het op dit punt af te klappen.

Teken op dezelfde manier vectorvormen met zo weinig mogelijk punten. Veel nieuwe ontwerpers nemen meer punten aan beter, wanneer het omgekeerde eigenlijk waar is: een paar punten, goed geplaatst, bieden meer controle over een element, terwijl ze ook de bestandsgrootte worden verminderd.

Als u vectorbestanden krijgt die deze regel niet volgen, maak je dan geen zorgen - het meest vector kunst Toepassingen hebben een 'simplify'-optie die u kunt gebruiken om het aantal punten in een element te verminderen zonder de vorm ervan te veranderen. Als alternatief, voor gedetailleerd werk, zou ik een plug-in voorstellen zoals Astute Graphics 'vectoren.

02. Verwijder de hoogte- en breedteattributen

De meeste apps voegen veel gepatenteerde, onnodige code in hun SVG-export toe. De enige vereiste code aan het begin van de meeste SVG-bestanden is het volgende:

 & lt; svg xmlns = "http://www.w3.org/2000/svg" Viewbox = "0 0 500 500" & GT;
& LT;! - SVG-code hier - & GT;
& LT; / SVG & GT; 

Voor onze doeleinden is het belangrijkste aspect de verwijdering van de breedte en hoogte Attributen die de meeste toepassingen automatisch bevatten. Dit maakt de SVG volledig reagerend in moderne browsers.

Als u veel SVGS verwerkt, of in een haast bent, hoeft u deze stap met de hand niet te voltooien. In plaats daarvan kunt u de suggesties volgen in de derde gouden regel ...

03. Optimaliseer en minify SVG-uitgang

Welke tool u ook gebruikt om uw SVG-inhoud te maken, het is nog steeds de moeite waard om de uitvoer ervan te verwerken via een gereedschap Svgomg , dat de code duidelijk trimt. Meestal kunt u ongeveer 20 tot 80 procent besparen in de bestandsgrootte. Dezelfde code kan lokaal worden geïntegreerd als een slok of grome taak ​

04. Wijzig de code voor IE

Regel 2 vermeldde dat correct geoptimaliseerde SVGS volledig reageert in moderne browsers. Dat is waar als we Microsoft Edge als een moderne browser tellen. Voor IE 9-11 hebben we een paar problemen om aan te pakken. Als we de SVG gebruiken als een afbeelding:

 & LT; IMG SRC = "Countdown.svg Alt =" Countdown "& GT; 

We kunnen IE9-11 forceren om de afbeelding correct weer te geven met behulp van de CSS-attribuutkiezer:

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

SVG-afbeeldingen werken goed in de algemene productie, maar hebben beperkte interactiviteit: de meeste browsers negeren interactiviteit en animatie in een SVG die op een pagina is geplaatst als een ​Bovendien zijn SVG-afbeeldingen een extra HTTP-aanvraag voor de browser.

Voor deze en andere redenen wordt SVG steeds meer inline gebruikt. In dat geval heeft de SVG-code een beetje meer behandeling nodig voor IE:

 & LT; BODY & GT;
​
& LT; SVG XMLNS = "http://www.w3.org/2000/SVG" ViewBox = "0 0 525 365" PreservEaseSepectRatio = "Xmidymin Slice" & GT; 

In aanvulling op de behoud van beeldverhouding Attribuut, dwz heeft een beetje meer begeleiding nodig om de juiste schaal van de afbeelding te behouden: neem de breedte van de SVG ( 365 In dit geval), verdeid het met de hoogte ( 525 ) en vermenigvuldig het resultaat met 100 procent. Dit wordt de vulling-bodem Waarde voor de SVG, 'Piepend' het openen in IE om de SVG in de juiste beeldverhouding weer te geven:

 & LT; BODY & GT;
​
& LT; SVG XMLNS = "http://www.w3.org/2000/SVG" Viewbox = "0 0 525 365"
PRESERVEASPECTRATIO = "XMIDYMIN SLICE"
Stijl = "Breedte: 100%; PADDING-bodem: 69,52%; Hoogte: 1px; Overloop: Zichtbaar" & GT; 

Merk op dat, om dingen aan te sluiten en duidelijk te houden, de codemonsters in de rest van dit artikel niet deze veranderingen opnemen. Amelia Bellamy-Royds heeft een geschreven Uitstekend artikel over Schalen SVG ​

05. Overweeg SVG voor heldtekst

Er is momenteel geen CSS-standaard voor het formuleren van tekst in de container. Het is mogelijk om tekst te schalen met behulp van VW-eenheden, maar die bijna altijd ten minste twee media-queryinterventies vereist om de tekst op bepaalde viewportlimieten te 'klemmen'. SVG-tekst wordt echter automatisch verkleind op een container:

 & 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; / Tekst & GT;
& LT; / SVG & GT;
& LT; / Header & GT; 

De CSS:

 Header Svg-tekst {
Font-gewicht: 900; FONT-SIZE: 90PX; Vul: blauw;
} 

De SVG-inline behoudt toegankelijkheid en SEO-waarde, en laat de tekst die moet worden gestyled met behulp van een lettertype dat al op de pagina is ingebed. Zien hier voor meer informatie.

06. Laat de breedte en de hoogte op zijn plaats voor progressieve pictogrammen

Eén uitzondering op regel 2 is pictogrammen en kleine logo's, die hun moeten behouden breedte en hoogte Attributen Als u wilt dat ze geleidelijk worden verbeterd:

 & lt; een href = "http://codepen.io" & GT;
    & LT; SVG ROL = "IMG" ARIA-LABEL = "COCEEPEN" Breedte = "50" Hoogte = "50" & GT;
        & LT; TITLE & GT; CODEPEN & LT; / TITLE & GT;
        & LT; gebruik XLINK: HREF = "# CODEPEN" / GT;
    & LT; / SVG & GT;
& LT; / A & GT;
​
& LT; SVG Style = "Display: Geen;" & GT;
    & LT; Symbool ID = "CODEPEN" ViewBox = "0 0 50 50" & GT;
        & LT; PATH D = "..." / GT;
    & LT; / SYMBY & GT;
& LT; / SVG & GT; 

Je kunt een voorbeeld van deze techniek in actie zien hier ​

Als we alleen de SVG-pictogrammen met CSS formatteren, en het stijlvel van de site niet laden, verschijnen de pictogrammen op de standaardgrootte van een vervangen element: 300px x 150px. Door de hoogte en breedte als kenmerken te houden, kunnen we ze standaard op de dichtstbijzijnde redelijke aanraakgrootte formaat en onze CSS gebruiken om de manier waarop ze worden gepresenteerd te verbeteren.

07. Gebruik vector-effecten om haarlijnen dun te houden

Standaard schaalt SVG alles af met de viewport, inclusief slagdikte. Meestal werkt dit prima, maar in sommige gevallen - diagrammen en slagen die als effecten op de buitenkant van de tekst in het bijzonder worden toegepast - misschien wilt u behouden in dezelfde dikte, ongeacht de grootte van de tekening. Dit is het domein van de kleine bekende vector-effect eigendom, dat kan worden toegepast als een presentatie-kenmerk of in CSS:

 pad {
    vullen: #fff; Slag: # 111;
    slagbreedte: 2;
    Vector-effect: niet-schaalmaatschappij;
} 

Bekijken Een volledig voorbeeld van deze techniek ​

08. Onthoud bitmaps

Veel ontwikkelaars gaan ervan uit dat SVG alleen vectoren kan gebruiken, maar JPEG's en PNG's kunnen ook worden toegepast op een SVG-tekening. En zolang je tot nu toe mijn regels hebt gevolgd, zullen die afbeeldingen reageren wanneer je een bitmap toevoegt via de label:

 & LT; Beeldbreedte = "1024" Hoogte = "768" XLink: href = "Lake-Louise.jpg" x = "1300" y = "150" rol = "afbeelding" titel = "Crowsnest pass" & GT; & lt; / beeld & gt; 

09. Overweeg adaptieve oplossingen

Het maken van dingen gaan 'squish' is slechts een deel van responsief ontwerp. Wat RWD gaat, presenteert in het grotere gevoel van adaptief ontwerp, geschikte inhoud bij alle viewportformaten.

Dit kan op verschillende manieren worden bereikt. ResponsiveLogos.co.uk biedt een reeks voorbeelden die SVG-sprites gebruiken, maar ik geef er de voorkeur aan om mediaquery's in de SVG te integreren om te creëren wat ik 'brandingmodules' noem. Met deze aanpak kan ik de zichtbaarheid van componenten toevoegen, verwijderen en wijzigen. Lees meer over Adaptive Branding-modules in mijn artikel ​

Deze zelfde techniek kan worden gebruikt voor diagrammen, illustraties, kaarten en meer. In de eenvoudigste modules kan de CSS zelf in de SVG worden geschreven, waardoor het overal bruikbaar is, zoals uiteengezet in de vorige regel.

10. Integreer mediaquery's in SVG

Veel mensen weten niet dat CSS-media-query's in SVG zelf kunnen worden geschreven:

 & LT; SVG XMLNS = "http://www.w3.org/2000/SVG" Viewbox = "14 82 272 139" & GT;
& LT; DEFS & GT;
& LT; STYLE & GT;
SVG G {Transition: 1S;​
@media allemaal en (max-breedte: 90rem) {
#Drink, #coke {Dekking: 0;​
​
& LT; / STYLE & GT;
& LT; / DEFS & GT;
& LT; G ID = "Coca-Cola" & GT;
& LT; PATH D = "M109.6 ... & GT; 

Het is belangrijk op te merken dat de mediaquery alleen 'zie' het element is dat het in de binnenkant is: dat wil zeggen, elke meting heeft betrekking op het element zelf, niet de pagina. Een potentieel nadeel van deze aanpak is dat het canvasgebied van de SVG altijd hetzelfde zal blijven, ten opzichte van de elementen erin.

Dit kan resulteren in zeer kleine elementen bij kleine viewport-maten, ingelijst in een relatief groot canvasgebied. Hier zijn verschillende oplossingen, inclusief het formaat van de weergavebox en de elementen opschalen om te compenseren ​

Gevolgtrekking

De oneindige schaalbaarheid van SVG is de grootste aanmelding, maar een functie die nog steeds enigszins wordt ondergebracht door browsers en vectorafbeeldingen editors. Door deze richtlijnen in uw productie-workflow te integreren en te communiceren met anderen in uw team, kunt u soepel responsieve SVG voor het web creëren, waardoor het deel uitmaakt van de activa die u elke dag in ontwikkeling gebruikt.

Dit artikel verscheen oorspronkelijk in netto tijdschrift kwestie 283; koop het hier ​

Gerelateerde artikelen:

• 12 Must-Have-testtestgereedschap
• Schakel je schetsende vaardigheden aan
• Supercharge SVG-animaties met GSAP