10 arany szabályok az SVG-kre vonatkozóan

Sep 16, 2025

kézikönyv

Az SVG sok előnye - beleértve a végtelen skálázható vektoros képeket, kis fájlméreteket és közvetlen integrációt a DOM-val - természetes illeszkedés érdekében Érzékeny webdesign . Annak ellenére, hogy az SVG specifikáció egy évtizedes régi, viszonylag közelmúltbeli támogatást nyújt számos böngészőben és szerszámokban, még mindig vannak olyan trükkök, kiskapuk és gotchák, amelyek még tapasztalt webes tervezők és fejlesztők is elkapnak.

Itt összefoglaltam ezek közül a legfontosabbakat, mint 10 arany szabály.

01. Állítsa be az eszközöket helyesen

Ahogy egy kézműves élesíti az eszközeit a munka megkezdése előtt, az SVG-vel dolgozó személyeknek be kell állítania az alkalmazásokat, hogy a lehető leghatékonyabb és optimalizált módszert biztosítsák. Számos beállítás létezik.

Először is, hacsak nincsenek kényszerítő okok, hogy másképp tegyenek meg, állítsa a méréseket a vektoros eszköz "képpontjaira". Bár nem számít az SVG-nek (ami méri a Viewbox és az elemek boldogan szinte bármilyen mérési rendszerben), érdemes kifejleszteni az SVG rajzot a közös CSS-egységek használatával, nem pedig a hüvelyk nyomtatási alapértelmezett értékét; és ez is sokkal könnyebb hozzáadásához @média Később lekérdezések és egyéb beavatkozások.

Ne tegye a vászon területét nagyobb, mint amennyire szüksége van. Mint a bitmap képek, az SVG bármely "üres helye" nem használható, és a legjobban helyettesíthető a CSS-margókkal. Ne feledje, hogy sok vektoros eszköz, mint például a vázlat, automatikusan "kivágja" a vászon területet a kiválasztott elemekre.

Ugyanakkor ne vágja el a vászon területét az elemek pontos széleihez. Az antialiasing továbbra is alkalmazható az SVG-re, és a túl közel vágás is kivághatja az antialiasinget. Ehelyett hagyja legalább 2px tiszta, bárhol, ahol a vászon széle közel kerül egy elemhez.

Az érzékenység és a teljesítmény szorosan összefügg, ezért állítsa be a tizedes pontosságot, hogy legfeljebb két pont legyen. Az SVG nem gondolja az egész számokat, így egy vektoros pont értéke 1,45882721px. Ez a szélsőséges pontosság teljesen felesleges, és csak hozzáadja a kódot és a fájlméretet, így jobb, ha ezt a pontot csonkolja.

Hasonlóképpen, rajzoljon vektoros formákat, amennyire csak lehetséges. Sok új tervező több pontot feltételez, ha a fordított valójában igaz: néhány pont, jól elhelyezve, nagyobb irányítást biztosít egy elem fölött, miközben csökkenti a fájlméretet.

Ha olyan vektorfájlokat kap, amelyek nem követik ezt a szabályt, ne aggódj - a legtöbb vektoros művészet Az alkalmazásoknak van egy "Egyszerűsítés" opcióval, hogy csökkentse a pontok számának csökkentését anélkül, hogy megváltoztatná az alakját. Alternatív megoldásként a részletes munkához azt javasolnám, hogy egy plugin, mint az astute graphics vectorscribe.

02. A magasság és a szélességi attribútumok eltávolítása

A legtöbb alkalmazás sok tulajdonosi, szükségtelen kódot ad hozzá az SVG exportjában. Az egyetlen szükséges kód a legtöbb SVG fájl kezdetén a következő:

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

Céljainkra a legfontosabb szempont a szélesség és magasság attribútumok, amelyeket a legtöbb alkalmazás automatikusan tartalmaz. Ez teszi az SVG teljes mértékben reagál a modern böngészőkben.

Ha sok SVG-t dolgozol, vagy rohanás, akkor nem kell kézzel befejezni ezt a lépéseket. Ehelyett követheti a harmadik aranyszabályban lefektetett javaslatokat ...

03. Optimalizálja és minimalizálja az SVG kimenetet

A combination of intelligent hand-editing and post-production optimisation can reduce SVG file sizes markedly — Az intelligens kézépítés és a produkciós optimalizálás kombinációja jelentősen csökkentheti az SVG fájlméreteit

Bármilyen eszközt használ az SVG tartalmának létrehozásához, még mindig érdemes feldolgozni a kimenetét egy olyan eszközzel Svgomg , amely mérsékelten vágja a kódot. Jellemzően körülbelül 20-80 százalékot takaríthat meg fájlméretben. Ugyanez a kód lehet helyben integrálni Gulp vagy grunt feladatként .

04. módosítsa az IE kódot

A 2. szabály megemlítette, hogy a helyesen optimalizált SVG-k teljes mértékben reagálnak a modern böngészőkben. Ez igaz, ha a Microsoft Edge-t modern böngészőnek számítjuk. Az IE 9-11-re van néhány kérdésünk a címre. Ha képként használjuk az SVG-t:

 & lt; img src = "countdown.svg alt =" visszaszámlálás "& gt;

Mi kényszeríthetjük az IE9-11-et, hogy helyesen jelenítsük meg a képet a CSS attribútumválasztóval:

 img [src $ = ". Svg"] {szélesség: 100%;}

Az SVG képek általában az általános termelésben jól működnek, de korlátozott interaktivitással rendelkeznek: a legtöbb böngésző figyelmen kívül hagyja az interaktivitást és az animációt egy oldalán egy oldalra helyezett SVG-ben . Ezenkívül az SVG képek egy további HTTP kérés a böngésző számára.

Ezekre és más okok miatt az SVG egyre inkább használják. Ebben az esetben az SVG kódnak szüksége van egy kicsit több kezelésére az IE:

 & lt; test & gt;
...
& lt; svg xmlns = "http://www.w3.org/2000/svg" Viewbox = "0 0 525 365" PreservEASPECTRATIO = "XMIDYMIN SLICE" & GT;

Amellett, hogy a PreserveSpectRatio Az attribútum, azaz egy kicsit több útmutatást igényel a kép megfelelő skálázásának megőrzéséhez: vegye az SVG szélességét ( 365 ebben az esetben), oszd meg a magassággal ( 525 ) és 100 százalékkal szorozzuk meg az eredményt. Ez lesz a padding alsó Az SVG értéke, "Propping" elegendő az IE-ben, hogy az SVG-t megfelelő képarányban jelenítse meg:

 & lt; test & gt;
...
& lt; svg xmlns = "http://www.w3.org/2000/svg" Viewbox = "0 0 525 365"
PreserveSpectRatio = "Xmidymin Slice"
Stílus = "Szélesség: 100%; padding-fene: 69,52%; magasság: 1px; túlcsordulás: látható" & gt;

Ne feledje, hogy a dolgok tömör és világos megőrzése érdekében a cikk többi részében a kódminták nem tartalmazzák ezeket a változásokat. Amelia Bellamy-Royds írt egy Kiváló cikk az SVG méretezéséről .

05. Fontolja meg az SVG-t a hős szövegéhez

Using SVG for hero text means it will automatically scale in line with its container — Az SVG használata a hős szövegéhez azt jelenti, hogy automatikusan lesz a tartályával összhangban

Jelenleg nincsenek CSS szabvány a szöveg méretezéséhez a tartályba. Lehetőség van a VW-egységek segítségével, de ez szinte mindig legalább két média lekérdezési beavatkozást igényel a "bilincs" a szöveget bizonyos nézetablak-határértékeken. Az SVG szöveg azonban automatikusan átméretezi a tartályt:

 & LT; header & gt;
& lt; svg xmlns = "http://www.w3.org/2000/svg" Viewbox = "0 0 285 80" & gt;
& lt; szöveg x = "0" y = "66" & gt; Kauai & Lt; / Text & Gt;
& lt; / svg & gt;
& Lt; / header & gt;

A CSS:

 fejléc svg szöveg {
betűtípus: 900; betűméret: 90px; Töltse ki: kék;
}

Az SVG inline megtartása megőrzi az akadálymentesítést és a SEO értéket, és lehetővé teszi a szöveg számára, hogy az oldalra már beágyazott betűtípust használjon. Lát itt további információért.

06. Hagyja a szélességet és a magasságot a progresszív ikonokhoz

A non-scaling-stroke line has been applied to this speech bubble so it will not change in width when the viewport is resized — A beszédbuborékra nem skálázott stroke vonalat alkalmaztak, így a nézetablak átméretezése után nem változik szélességben

A 2. szabály egy kivétele ikonok és kis logók, amelyek meg kell őrizniük szélesség és magasság attribútumok, ha azt szeretné, hogy fokozatosan fokozzák:

 & lt; egy href = "http://codepen.io" & gt;
    & lt; svg szerep = "img" aria-címke = "codepen" szélesség = "50" magasság = "50" & gt;
        & lt; Cím & gt; codepen & lt; / cím & gt;
        & lt; használja az xlink: href = "# codepen" / & gt;
    & lt; / svg & gt;
& lt; / a & gt;
...
& lt; svg stílus = "Kijelző: Nincs;" & gt;
    & lt; Symbol ID = "Codepen" Viewbox = "0 0 50 50" & gt;
        & lt; path d = "..." / & gt;
    & lt; / symbol & gt;
& lt; / svg & gt;

Láthatja a technikát a cselekvésben itt .

Ha csak az SVG ikonokat mérik CSS-vel, és a webhely stíluslapja nem töltődik be, az ikonok megjelennek a helyettesített elem alapértelmezett méretében: 300px x 150px. A magasság és a szélesség attribútumokként való megtartásával alapértelmezés szerint a legközelebbi ésszerű érintőképességre méretezhetjük őket, és használjuk a CSS-t, hogy fokozzák a bemutatott módon.

07. Vektor-effektusokat használjon a hajszálak vékonyak fenntartásához

Alapértelmezés szerint az SVG mérlegel mindent a nézetablakkal, beleértve a löket vastagságát is. Általában ez működik a finom, de bizonyos esetekben - az ábrák és az agyvérzés alkalmazni hatások a külső szöveg különösen - ha meg akarja tartani a stroke az azonos vastagságú, nem számít, milyen a mérete a rajzon. Ez a kevéssé ismert domainje Vektor-hatás Tulajdonság, amely bemutató attribútumként vagy CSS-ben alkalmazható:

 Útvonal {
    Töltse ki: #FFF; Stroke: # 111;
    stroke-width: 2;
    Vektor-hatás: nem skálázott stroke;
}

Vessünk egy pillantást A technika teljes példája .

08. Emlékezzen bittérképekre

Sok fejlesztő feltételezi, hogy az SVG csak vektorokat használhat, de a JPEG-k és a PNG-k is alkalmazhatók SVG rajzra. És mindaddig, amíg eddig követte a szabályomat, ezek a képek akkor fognak reagálni, ha hozzáad egy bitmapot a címke:

 & lt; image width = "1024" magasság = "768" xlink: href = "tó-louise.jpg" x = "1300" y = "150" szerep = "kép" cím = "Crowsnest Pass" & gt; & lt; / kép & gt;

09. Fontolja meg az adaptív megoldásokat

A klasszikus Coca-Cola logó különböző adaptív méretekben

A dolgok elkészítése "Squish" csak egy része az érzékeny designnak. Milyen rwd jelentkezik az adaptív kialakítás nagyobb érzésében, megfelelő tartalmat mutat az összes nézetablak méretében.

Ez sokféle módon érhető el. A RespectiveLeLogos.co.uk számos példát mutat, amelyek SVG Sprite-t használnak, de inkább a média lekérdezéseket integrálom az SVG-be, hogy hozzák létre, amit "márkázási modulok" nevezek. Ez a megközelítés lehetővé teszi számomra, hogy hozzáadjam, eltávolítsák és módosítsák az összetevők láthatóságát. További információ az Adaptive Branding modulokról A cikkemben .

Ugyanez a technika lehet használni diagramok, illusztrációk, térképek és így tovább. A legegyszerűbb modulokban a CSS maga írható az SVG belsejében, így mindenhol használható, az előző szabályban körvonalazva.

10. A média lekérdezések integrálása SVG-re

Sokan nem tudják, hogy a CSS média lekérdezései az SVG belsejében írhatók:

 & lt; svg xmlns = "http://www.w3.org/2000/svg" Viewbox = "14 82 272 139" & gt;
& lt; DEFS & GT;
& lt; style & gt;
svg g {átmenet: 1s; }
@media minden és (max-szélesség: 90REM) {
#drink, #coke {opacity: 0; }
}
& lt; / style & gt;
& lt; / defs & gt;
& lt; g id = "Coca-Cola" & gt;
& lt; út D = "M109.6 ... & GT;

Fontos megjegyezni, hogy a média lekérdezés csak "lásd" az elemet, amely belsejében van: azaz bármely mérés az elemhez kapcsolódik, nem az oldal. Ennek a megközelítésnek az egyik potenciális hátránya, hogy az SVG vászon területe mindig ugyanaz marad, az elemek elemeihez képest.

Ez nagyon kicsi elemeket eredményezhet a kis nézetablak méretekben, amely egy viszonylag nagy vászon területen belül keretes. Ennek számos megoldás létezik, többek között A VideóBox átméretezése és az elemek kompenzálásához szükséges elemek skálázása .

Következtetés

Az SVG végtelen skálázhatósága a legnagyobb eszköz, de egy olyan funkció, amely még mindig némileg megkülönböztethető a böngészők és a vektoros grafikus szerkesztők. Az ezen iránymutatásokat a termelési munkafolyamatba való integrálásával, valamint a csapat másokkal való kommunikációjával, zökkenőmentesen érzékeny SVG-t hozhat létre az interneten, így minden nap a fejlesztés során használt eszközök részét képezheti.

Ez a cikk eredetileg megjelent net magazin 283. kiadás; Vásárolja meg itt !

Kapcsolódó cikkek:

12 kötelező kódvizsgálati eszközökkel kell rendelkeznie
Élesítse meg a vázlatos képességeit
SuperCed SVG animációk GSAP-val

10 arany szabályok az SVG-kre vonatkozóan

01. Állítsa be az eszközöket helyesen

02. A magasság és a szélességi attribútumok eltávolítása

03. Optimalizálja és minimalizálja az SVG kimenetet

04. módosítsa az IE kódot

05. Fontolja meg az SVG-t a hős szövegéhez

06. Hagyja a szélességet és a magasságot a progresszív ikonokhoz

07. Vektor-effektusokat használjon a hajszálak vékonyak fenntartásához

08. Emlékezzen bittérképekre

09. Fontolja meg az adaptív megoldásokat

10. A média lekérdezések integrálása SVG-re

Következtetés

kézikönyv - Most Popular Articles

Az Apple iCloud tárolója tele van? Íme, hogyan kell felszabadítani a helyet

Export után Effect Animációk HTML5

Mi a terminátor vonal?

Festeni egy klasszikus tündér jelenetet a Procreate-vel

Hogyan készítsünk ízletes textúrákat ceruzával

Hozzon létre szerves textúrákat tintában

Hogyan kezdjük el a SASS-t

Mi új a szögben 4?

Kategóriák