10 Zlatá pravidla pro reagující SVGS

Sep 14, 2025

jak

Mnoho výhod SVG - včetně nekonečně škálovatelných vektorových obrazů, malých velikostí souborů a přímou integraci s DOM - z něj činí přirozené přizpůsobení Reagovat web design . Navzdory specifikaci SVG je starý desetiletí, je to poměrně nedávná podpora v mnoha prohlížečích a nástrojích znamená, že stále existuje řada triků, mezer a gotchas, které vyloví i zkušené web designéry a vývojáře.

Zde jsem shrnul nejdůležitější z těchto 10 zlatých pravidel.

01. Nastavte své nástroje správně

Stejně jako řemeslník zvětší své nástroje před začátkem práce, každý, kdo pracuje s SVG, musí nastavit své aplikace, aby dodal vektorový formát v nejúčinnější a optimalizovanější metodě. Existuje celá řada nastavení k implementaci.

Nejprve, pokud neexistují přesvědčivé důvody, proč dělat jinak nastavit měření na "pixely" ve vašem vektorovém nástroji. I když nezáleží na SVG (který změří viewbox. a prvky šťastně v téměř každém měřicím systému) má smysl vytvořit SVG výkres pomocí společných CSS jednotek, spíše než výchozí výchozí tisku palce; A také to dělá mnohem snazší přidat @Media. a další intervence později.

Nedělejte plochu plátna větší, než je třeba. Stejně jako bitmapové snímky, žádné "prázdné místo" v SVG nebudou použity, a je nejlépe substituovaný CSS margins. Všimněte si, že mnoho vektorových nástrojů, jako je skica, automaticky "plodin" oblast plátno vybraným prvkům.

Současně nepokládejte oblast plátna na přesné hrany prvků. Antialiasing bude stále aplikováno na SVG a řezání příliš blízko může také plodit antialiasing. Místo toho ponechte alespoň 2px Clear, kde se okraj plátna přiblíží prvku.

Seznámenost a výkonnost jsou úzce spjaty, takže nastavte desetinnou přesnost, aby nebyli více než dva body. SVG si nemyslí v celých číslech, takže vektorový bod může mít hodnotu 1.45882721px. Tato extrémní přesnost je zcela zbytečná a přidává pouze kódu bloat a velikost souboru, takže je lepší, aby ji v tomto bodě zkrátil.

Podobně kreslit vektorové tvary pomocí co nejméně bodů. Mnoho nových návrhářů předpokládá, že více bodů je lepší, když je opěradlo skutečně pravdivá: Několik bodů, umístěné dobře, poskytují větší kontrolu nad prvkem, zatímco také snižuje velikost souboru.

Pokud jste dali vektorové soubory, které nesledují toto pravidlo, nebojte se - nejvíce Vektorové umění Aplikace mají možnost "Zjednodušit", kterou můžete použít ke snížení počtu bodů v prvku bez změny tvaru. Alternativně, pro detailní práci, kterou bych navrhl plugin jako ASTUTE Graphics 'VectorScricit.

02. Odstraňte atributy výšky a šířky

Většina aplikací přidává mnoho proprietárního, zbytečného kódu v jejich exportu SVG. Jediný požadovaný kód na začátku většiny souborů SVG je následující:

 & lt; svg xmlns = "http://www.w3.org/2000/svg" ViewBox = "0 0 500 500" & gt;
& lt;! - SVG kód zde - & gt;
& lt; / svg & gt;

Pro naše účely je nejdůležitějším aspektem odstranění šířka a výška Atributy, které většina aplikací automaticky obsahuje. Díky tomu je SVG plně reagující v moderních prohlížečích.

Pokud zpracováváte hodně SVG, nebo jste ve spěchu, nemusíte tento krok dokončit ručně. Místo toho můžete sledovat návrhy stanovené ve třetím zlatém pravidle ...

03. Optimalizace a minifikace výstupu SVG

A combination of intelligent hand-editing and post-production optimisation can reduce SVG file sizes markedly — Kombinace inteligentního ručního editace a postprodukční optimalizace může snižovat velikosti souborů SVG

Ať už se jedná o jakýkoliv nástroj, který používáte k vytvoření svého obsahu SVG, je stále užitečné zpracování jeho výstupu prostřednictvím nástroje jako Svgomg. , což výrazně ořízne kód. Obvykle můžete ušetřit asi 20 až 80% v velikosti souboru. Stejný kód lze integrovat lokálně Jako úkol gulp nebo grunt .

04. Změnit kód pro IE

Pravidlo 2 zmíněno, že správně optimalizované SVGS jsou plně reagující v moderních prohlížečích. To je pravda, pokud počítáme Microsoft Edge jako moderní prohlížeč. Pro IE 9-11 máme několik otázek k adresování. Pokud používáte SVG jako obrázek:

 & lt; img src = "countdown.svg alt =" odpočítávání "& gt;

Můžeme donutit IE9-11 zobrazit snímek správně pomocí voliče atributu CSS:

 IMG [SRC $ = ". SVG"] {šířka: 100%;}

SVG snímky fungují dobře v obecné produkci, ale mají omezenou interaktivitu: většina prohlížečů bude ignorovat interaktivitu a animaci uvnitř SVG umístěného na stránce jako . SVG obrázky jsou navíc další požadavek HTTP pro prohlížeč.

Pro tyto a další důvody je SVG stále více používáno inline. V takovém případě potřebuje SVG kód o něco více léčby, tj.

Navíc k PreserveaspectRatio. Atribut, tj. Potřebuje o něco více pokynů k zachování správné škálování obrazu: Vezměte si šířku SVG ( 365. V tomto případě rozdělte na výšku ( 525. ) a vynásobte výsledek o 100%. To se stane polstrování-dno Hodnota pro SVG, 'copping' je otevřena dostatečně otevřená v tj. Pro zobrazení SVG ve svém správném poměru stran:

Všimněte si, že s cílem udržet věci stručné a jasné, vzorky kódu ve zbytku tohoto článku nezahrnují tyto změny. Amelia Bellamy-Roysads napsal Vynikající článek o škálování SVG .

05. Zvažte SVG pro text hrdiny

Using SVG for hero text means it will automatically scale in line with its container — Použití SVG pro text hrdiny znamená, že se automaticky mění v souladu s kontejnerem

V současné době není standard CSS standard pro velikost textu do kontejneru. Je možné měřítko textu pomocí jednotek VW, ale to bude téměř vždy vyžadovat alespoň dva intervence média dotazu na text "Svorka" na určité limity výřezu. Text SVG však automaticky změní velikost kontejneru:

 & lt; záhlaví & 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:

 Text záhlaví SVG {
Hmotnost písma: 900; Velikost písma: 90px; Vyplňte: modrá;
}

Udržování SVG inline zachovává dostupnost a SEO hodnotu a umožňuje, aby byl text stylizován pomocí libovolného písma, který je již vložen na stránce. Vidět tady Pro více informací.

06. Nechte šířku a výšku na místě pro progresivní ikony

A non-scaling-stroke line has been applied to this speech bubble so it will not change in width when the viewport is resized — Na tuto řečovou bublinu byla aplikována čára bez měřítka-tahu, takže se změní na šířku při změně velikosti výřezu

Jedna výjimka z pravidla 2 je ikony a malá loga, která by měla zachovat jejich šířka a výška Atributy Pokud chcete, aby byli postupně vylepšeni:

 & lt; a href = "http://codepen.io" & gt;
    & lt, svg role = "img" aria-label = "codepen" šířka = "50" výška = "50" & gt;
        & lt, titul & gt; codepen & lt; / titul & gt;
        Použití XLINK: href = "# codepen" / & gt;
    & lt; / svg & gt;
& lt; / A & gt;
...
& lt; SVG Style = "Displej: žádný;" & gt;
    & lt; symbol id = "codepen" viewbox = "0 0 50 50" & gt;
        & lt; cesta d = "..." / gt;
    & lt; / symbol & gt;
& lt; / svg & gt;

Můžete vidět příklad této techniky v akci tady .

Pokud zveřejneme pouze ikony SVG s CSS a list styl webu není načíst, ikony se objeví na výchozí velikosti vyměněného prvku: 300px x 150px. Udržováním výšky a šířky jako atributy, můžeme je ve výchozím nastavení velikost na nejbližší rozumnou dotyku a používat naše CSS pro zvýšení způsobu, jakým jsou prezentovány.

07. Použijte vektorové efekty pro udržení vlasů tenké

Ve výchozím nastavení SVG Scales Všechno s výřezem, včetně tloušťky zdvihu. Obvykle to funguje v pořádku, ale v některých případech - diagramy a tahy aplikované jako účinky na vnější straně textu - možná budete chtít udržet tahy stejné tloušťky, bez ohledu na velikost výkresu. To je doména malého známého Vektorový efekt majetek, který lze použít jako atribut prezentace nebo v CSS:

 cesta {
    Vyplňte: #FFF; Zdvih: # 111;
    šířka tahu: 2;
    Vektorový efekt: bez měřítka;
}

Podívejte se na Úplný příklad této techniky .

08. Pamatujte si bitmapy

Mnoho vývojářů předpokládá SVG může používat pouze vektory, ale JPEGS a PNG mohou být také aplikovány na výkres SVG. A tak dlouho, jak jste doposud následovali moje pravidla, tyto obrázky budou reagovat, když přidáte bitmapu přes štítek:

 Image Width = "1024" výška = "768" XLINK: href = "Lake-Louise.jpg" X = "1300" Y = "150" role = "Image" Title = "Crowsnest Pass" & GT; & lt; / image & gt;

09. Zvažte adaptivní řešení

Klasický logo Coca-Cola vykreslen v různých adaptivních velikostech

Dělat věci jít 'squish' je jen jedna část reagujícího designu. Co RWD je ve větším pocitu adaptivního designu, představuje vhodný obsah ve všech velikostech výřezu.

To lze dosáhnout různými způsoby. OdpovědnostIGOS.CO.UK poskytuje řadu příkladů, které používají SVG Sprity, ale dávám přednost integraci mediálních dotazů do SVG, abyste vytvořili to, co nazývám "branding moduly". Tento přístup mi umožňuje přidat, odebrat a upravit viditelnost komponent. Přečtěte si více o adaptivních značkových modulech v mém článku .

Tato stejná technika může být použita pro diagramy, ilustrace, mapy a další. V nejjednodušších modulech může být Samotná CSS napsána uvnitř SVG, což je užitečné všude, jak je uvedeno v předchozím pravidle.

10. Integrujte mediální dotazy do SVG

Mnoho lidí neví, že mediální dotazy CSS mohou být napsány v SVG samotném:

 & lt; svg xmlns = "http://www.w3.org/2000/svg" ViewBox = "14 82 272 139" & gt;
& lt; defs & gt;
& lt; styl & gt;
SVG G {přechod: 1s; }
@Media all a (max-šířka: 90Rem) {
#drink, #coke {Opacity: 0; }
}
& lt; / styl & gt;
& lt; / defs & gt;
& lt; g id = "coca-cola" & gt;
& lt; cesta d = "m109.6 ... & gt;

Je důležité poznamenat, že mediální dotaz může pouze "viz" prvek, který je uvnitř: to znamená, že jakékoli měření se vztahuje k samotnému prvku, nikoli na stránce. Jedním z potenciálních nevýhodu tohoto přístupu je, že plátěný oblast SVG zůstane vždy stejný, ve vztahu k prvkům uvnitř IT.

To může mít za následek velmi malé prvky na malých velikostech výhledu, zarámovány uvnitř relativně velkého plátna. Existuje několik řešení, včetně Změna velikosti zobrazení a měřítko prvků pro kompenzaci .

Závěr

Nekonečná škálovatelnost SVG je jeho největší aktivum, ale funkce, která je stále poněkud zdůrazněna prohlížeči a vektorovými grafickými editory. Integrací těchto pokynů do vašeho výrobního pracovního postupu a komunikují je k ostatním ve vašem týmu, můžete vytvořit hladce citlivé SVG pro web, což je součástí aktiv, které používáte ve vývoji každý den.

Tento článek se původně objevil Čistý časopis Vydání 283; koupit to tady Dokázal se!

Související články:

12 Musí mít nástroje pro testování kódů
Vyostřete své skicování dovednosti
Superge SVG animace s GSAP

10 Zlatá pravidla pro reagující SVGS

01. Nastavte své nástroje správně

02. Odstraňte atributy výšky a šířky

03. Optimalizace a minifikace výstupu SVG

04. Změnit kód pro IE

05. Zvažte SVG pro text hrdiny

06. Nechte šířku a výšku na místě pro progresivní ikony

07. Použijte vektorové efekty pro udržení vlasů tenké

08. Pamatujte si bitmapy

09. Zvažte adaptivní řešení

10. Integrujte mediální dotazy do SVG

Závěr

jak - Nejoblíbenější články

Jak změnit písmo ve vašem Instagramu bio

perieref: jak používat referenční nástroj pro obraz

Tipy vizuálního vývoje: Řekněte příběh s vaší kresbou

Práce inteligentní s vaším Zbrushem UI

Získejte více z grafitu s těmito tipy

Použijte Chart.js pro vypnutí dat do interaktivních diagramů

Barva ve stylu munch ve Photoshopu CC

steh a kompozice 360 záběry

Kategorie