10 regole dorate per SVG reattivi

I numerosi vantaggi di SVG - comprese le immagini vettoriali scalabili infinitamente, dimensioni di file piccoli e integrazione diretta con il DOM - rendono un adattamento naturale per web design reattivo . Nonostante la specifica SVG è un decennio vecchio, è un supporto relativamente recente in molti browser e strumenti significa che ci sono ancora un certo numero di trucchi, scappatoie e gantisci che ostacolano anche web designer e sviluppatori esperti.

Qui, ho riassunto il più importante di questi come 10 regole d'oro.

01. Configurare correttamente i tuoi strumenti

Proprio come un artigiano affila i suoi strumenti prima di iniziare il lavoro, chiunque lavora con SVG deve impostare le loro applicazioni fino a fornire il formato vettoriale nel metodo più efficiente e ottimizzato possibile. Ci sono un certo numero di impostazioni da implementare.

In primo luogo, a meno che non ci siano ragioni avvincenti per fare diversamente, impostare le misurazioni in "pixel" nello strumento vettoriale. Mentre non importa a Svg (che misurerà il Viewbox. ed elementi felici in quasi tutti i sistemi di misurazione) ha senso sviluppare il disegno SVG utilizzando unità CSS comuni, piuttosto che il valore predefinito di stampa di pollici; e rende anche molto più facile aggiungere @media query e altri interventi più tardi.

Non rendere l'area di tela più grande di quanto debba essere. Come immagini bitmap, qualsiasi "spazio vuoto" nello SVG non verrà utilizzato e è meglio sostituito con i margini CSS. Si noti che molti strumenti vettoriali, come schizzi, "ritagliano" automaticamente l'area della tela agli elementi selezionati.

Allo stesso tempo, non ritagliare l'area di tela ai bordi esatti degli elementi. L'antialiasing verrà comunque applicata all'SVG e il taglio troppo vicino può anche ritagliare l'antialiasing. Invece, lascia almeno 2 px chiaro ovunque il bordo della tela si avvicina a un elemento.

La reattività e le prestazioni sono strettamente correlate, quindi impostare la precisione decimale non più di due punti. SVG non pensa in numeri interi, quindi un punto vettoriale può avere un valore di 1.45882721px. Questa estrema precisione è interamente inutile e aggiunge solo al codice della boat e della dimensione del file, quindi è meglio troncarlo a questo punto.

Allo stesso modo, disegna forme vettoriali usando il minor numero possibile di punti. Molti nuovi designer assumono più punti è meglio, quando il contrario è effettivamente vero: alcuni punti, posizionati bene, forniscono un maggiore controllo su un elemento, riducendo anche la dimensione del file.

Se ti vengono dati file vettoriali che non seguono questa regola, non preoccuparti, la maggior parte Arte vettoriale Le applicazioni hanno un'opzione "semplifica" che è possibile utilizzare per ridurre il numero di punti in un elemento senza modificare la sua forma. In alternativa, per lavori dettagliati suggerirei un plugin come il vettore della grafica astuta.

02. Rimuovere l'altezza e gli attributi della larghezza

La maggior parte delle app aggiungono un sacco di codice proprietario, inutile nel loro esportazione SVG. L'unico codice richiesto all'inizio della maggior parte dei file SVG è il seguente:

 & lt; svg xmlns = "http://www.w3.org/2000/svg" viewbox = "0 0 500 500" & gt;
& lt;! - codice svg qui - & gt;
& lt; / svg & gt; 

Per i nostri scopi, l'aspetto più importante è la rimozione del larghezza e altezza Attributi che la maggior parte delle applicazioni include automaticamente. Questo rende lo SVG pienamente reattivo nei browser moderni.

Se stai elaborando un sacco di svgs o sono in fretta, non è necessario completare questo passo a mano. Invece, puoi seguire i suggerimenti disposti nella terza regola d'oro ...

03. Ottimizza e minificare l'output SVG

Qualunque strumento usi per creare il tuo contenuto SVG, vale ancora la pena elaborare la sua uscita attraverso uno strumento come Svgomg. , che taglierai il codice in modo marcatamente. In genere, è possibile risparmiare intorno dal 20 all'80% nella dimensione del file. Lo stesso codice può essere integrato localmente Come un golp o un compito di grugnito .

04. Modifica il codice per IE

La regola 2 ha menzionato che gli SVG correttamente ottimizzati sono pienamente reattivi nei browser moderni. È vero se contiamo Microsoft Edge come un browser moderno. Per IE 9-11, abbiamo alcuni problemi da affrontare. Se stiamo usando lo SVG come immagine:

 & lt; img src = "countdown.svg alt =" conto alla rovescia "e GT; 

Possiamo forzare IE9-11 per visualizzare correttamente l'immagine utilizzando il selettore Attributo CSS:

 img [src $ = ". Svg"] {larghezza: 100%;} 

Le immagini SVG funzionano bene nella produzione generale, ma hanno una limitata interattività: la maggior parte dei browser ignorerà l'interattività e l'animazione all'interno di un SVG posizionato su una pagina come un . Inoltre, le immagini SVG sono una richiesta HTTP aggiuntiva per il browser.

Per questi e altri motivi, SVG è sempre più utilizzato in linea. In tal caso, il codice SVG ha bisogno di un po 'più di trattamento per IE:

 & lt; Body & GT;
...
& lt; svg xmlns = "http://www.w3.org/2000/svg" viewbox = "0 0 525 365" conservaeespectratio = "xmidymin slice" & gt; 

In aggiunta a conservaespectratio. Attributo, ovvero ha bisogno di un po 'più di guida per preservare il ridimensionamento corretto dell'immagine: prendere la larghezza dello SVG ( 365. In questo caso), dividerlo per l'altezza ( 525. ) e moltiplicare il risultato del 100%. Questo diventerà il imbottitura Valore per l'SVG, "Propping" è abbastanza aperto in IE per visualizzare l'SVG nel suo modo corretto:

 & lt; Body & GT;
...
& lt; svg xmlns = "http://www.w3.org/2000/svg" Viewbox = "0 0 525 365"
conservaeespectratio = "xmidymin fetice"
Stile = "Larghezza: 100%; Imbottitura-inferiore: 69,52%; Altezza: 1px; Overflow: visibile" & GT; 

Si noti che, al fine di mantenere le cose concise e chiare, i campioni di codice nel resto di questo articolo non includono queste modifiche. Amelia Bellamy-Royds ha scritto un Articolo eccellente su svg di ridimensionamento .

05. Considera SVG per il testo dell'eroe

Al momento non ci sono standard CSS per il dimensionamento del testo al suo contenitore. È possibile scalare il testo utilizzando le unità VW, ma ciò richiederà quasi sempre almeno due interventi di query multimediali a "morsetto" il testo in determinati limiti di vista. Tuttavia, SVG Text ridimensionerà automaticamente a un contenitore:

 & lt; header & gt;
& lt; svg xmlns = "http://www.w3.org/2000/svg" viewbox = "0 0 285 80" & gt;
& lt; testo x = "0" y = "66" & gt; kauai & lt; / text & gt;
& lt; / svg & gt;
& lt; / header & gt; 

Il CSS:

 Testo dell'intestazione SVG {
Peso del font: 900; Dimensioni del carattere: 90px; Riempi: blu;
} 

Mantenere l'INLESSE SVG conserva l'accessibilità e il valore SEO e consente di stilizzare il testo utilizzando alcun carattere già incorporato nella pagina. Vedere Qui per maggiori informazioni.

06. Lasciare larghezza e altezza in posizione per icone progressive

Un'eccezione per la regola 2 è icone e piccoli loghi, che dovrebbero conservare il loro larghezza e altezza Attributi se vuoi che vengano progressivamente migliorati:

 & lt; a href = "http://codepen.io" & gt;
    & lt; svg ruolo = "img" ARIA-Etichetta = "codepen" width = "50" altezza = "50" e GT;
        & lt; Titolo & GT; Codepen & Lt; / Titolo & GT;
        & lt; usare xlink: href = "# codepen" / & gt;
    & lt; / svg & gt;
& lt; / A & GT;
...
& lt; svg style = "display: nessuno;" & gt;
    & lt; simbolo id = "codepen" Viewbox = "0 0 50 50" & GT;
        & lt; percorso d = "..." / & gt;
    & lt; / simbolo e GT;
& lt; / svg & gt; 

Puoi vedere un esempio di questa tecnica in azione Qui .

Se dimensioniamo solo le icone SVG con CSS, e il foglio di stile del sito non viene caricato, le icone appariranno alla dimensione predefinita di un elemento sostituito: 300px x 150px. Mantenendo l'altezza e la larghezza come attributi, possiamo ridimensionarli alla più vicina dimensione del tatto ragionevole per impostazione predefinita e utilizzare il nostro CSS per migliorare il modo in cui sono presentati.

07. Utilizzare effetti vettoriali per mantenere le cateneture sottili

Per impostazione predefinita, SVG ridimensiona tutto con la vista, incluso lo spessore della corsa. Di solito questo funziona bene, ma in alcuni casi - diagrammi e tratti applicati come effetti sull'esterno del testo in particolare - potresti voler mantenere i colpi lo stesso spessore, indipendentemente dalla dimensione del disegno. Questo è il dominio del poco conosciuto Effetto vettoriale proprietà, che può essere applicata come attributo di presentazione o in CSS:

 Percorso {
    Riempi: #fff; ictus: # 111;
    Corsa-Larghezza: 2;
    effetto vettoriale: non-ridimensionamento;
} 

Dare un'occhiata a Un intero esempio di questa tecnica .

08. Ricorda bitmaps.

Molti sviluppatori assumono SVG possono utilizzare solo vettori, ma JPEG e PNG possono anche essere applicati a un disegno SVG. E fintanto che hai seguito le mie regole finora, quelle immagini saranno reattivi quando aggiungi una bitmap tramite il etichetta:

 & lt; Image width = "1024" altezza = "768" Xlink: href = "lake-louise.jpg" x = "1300" y = "150" ruolo = "Immagine" Titolo = "Titolo di crowsnest" e GT; & lt; / Image & GT; 

09. Considera le soluzioni adattative

Rendere le cose andare 'Squish' è solo una parte del design reattivo. Ciò riguarda il rwd, nel maggiore senso del design adattivo, sta presentando contenuti appropriati in tutte le dimensioni del punto di vista.

Questo può essere raggiunto in una varietà di modi. RespondereLogos.co.uk offre una serie di esempi che utilizzano SVG Sprites, ma preferisco integrare le query dei supporti nell'SVG per creare ciò che chiamo 'moduli di branding'. Questo approccio mi consente di aggiungere, rimuovere e modificare la visibilità dei componenti. Maggiori informazioni sui moduli di marchio adattivi Nel mio articolo .

Questa stessa tecnica può essere utilizzata per diagrammi, illustrazioni, mappe e altro ancora. Nei moduli più semplici, il CSS stesso può essere scritto all'interno dell'SVG, rendendolo utilizzabile ovunque, come delineato nella regola precedente.

10. Integrare le query dei supporti in SVG

Molte persone non sanno che le query dei supporti CSS possono essere scritte all'interno di SVG stesso:

 & lt; svg xmlns = "http://www.w3.org/2000/svg" viewbox = "14 82 272 139" & GT;
& lt; defs & gt;
& lt; style & gt;
svg g {transizione: 1s; }
@media tutto e (larghezza massima: 90rem) {
#drink, #coke {opacità: 0; }
}
& lt; / style & gt;
& lt; / defs & gt;
& lt; g id = "coca-cola" & gt;
& lt; percorso d = "m109.6 ... & gt; 

È importante notare che la query del supporto può solo "vedere" l'elemento che è all'interno di: cioè, qualsiasi misura si riferisce all'elemento stesso, non alla pagina. Un potenziale svantaggio di questo approccio è che l'area della tela del SVG rimarrà sempre la stessa, relativa agli elementi al suo interno.

Ciò può causare elementi molto piccoli in piccole dimensioni della vista, incorniciate all'interno di un'area di tela relativamente ampia. Ci sono diverse soluzioni a questo, incluso Ridimensionare il ViewBox. e ridimensionare gli elementi per compensare .

Conclusione

La scalabilità infinita di SVG è la sua più grande risorsa, ma una caratteristica che è ancora in qualche modo sottoservita dai browser e dagli editor di grafica vettoriale. Integrando queste linee guida nel flusso di lavoro di produzione e comunicandole ad altri nella tua squadra, è possibile creare SVG senza intoppi per il web, rendendolo parte delle risorse che usi in sviluppo ogni giorno.

Questo articolo è originariamente apparso in Magazine netta Edizione 283; Compralo qui !

Articoli Correlati:

• 12 strumenti di test di codice non devono-avere
• Affila le tue abilità di abbozzo
• SuperCome SVG Animazioni con GSAP