6 gyakori SVG-hiba (és hogyan lehet javítani)

Nemrég valaki megkérdezte, hogyan közelítem meg a soron belüli SVG-k hibakeresését. Mivel ez a DOM része, bármilyen beépített SVG-t ellenőrizhetünk bármely böngésző DevTools-ban. Emiatt megvan a lehetőségünk arra, hogy áttekintsük a dolgokat, és feltárjunk minden lehetséges problémát vagy lehetőséget az SVG optimalizálására.

De néha egyáltalán nem látjuk az SVG-ket. Ilyen esetekben hat konkrét dologra figyelek hibakereséskor.

1. A viewBox értékek

A viewBox gyakori zavart okozó pont az SVG-vel való munka során. Technikailag rendben van az inline SVG használata nélküle, de elveszítenénk az egyik legjelentősebb előnyét: a konténerrel való méretezést. Ugyanakkor, ha nem megfelelően van beállítva, ellenünk is működhet, ami nemkívánatos kivágást eredményez.

Az elemek ott vannak, amikor levágják őket – csak a koordinátarendszer egy olyan részében vannak, amelyet nem látunk. Ha valamilyen grafikus szerkesztő programban nyitnánk meg a fájlt, az így nézne ki:

A legegyszerűbb módja ennek a javításának? Hozzáadás overflow="visible" az SVG-hez, függetlenül attól, hogy az szerepel a stíluslapunkon, soron belül a style attribútum vagy közvetlenül SVG prezentációs attribútumként. De ha alkalmazzuk a background-color az SVG-hez, vagy ha más elemek is vannak körülötte, a dolgok kissé elcsúszhatnak. Ebben az esetben a legjobb megoldás a viewBox a koordinátarendszer rejtett részének megjelenítéséhez:

Van néhány további dolog a viewBox amivel érdemes foglalkozni, amíg a témánál tartunk:

Hogyan viewBox működik?

Az SVG egy végtelen vászon, de a nézetablakon keresztül szabályozhatjuk, hogy mit és hogyan lássunk. viewBox.

A nézetablak ablakkeret a végtelen vásznon. Méreteit az határozza meg width és a height attribútumokkal, vagy CSS-ben a megfelelővel width és a height tulajdonságait. Bármilyen hosszegységet megadhatunk, de ha egység nélküli számokat adunk meg, akkor azok alapértelmezés szerint pixelek.

A viewBox négy érték határozza meg. Az első kettő a kiindulópont a bal felső sarokban (x és a y értékek, negatív számok megengedettek). Ezeket szerkesztem, hogy átkeretezzem a képet. Az utolsó kettő a nézetablakon belüli koordinátarendszer szélessége és magassága – itt szerkeszthetjük a rács léptékét (amire a következő részben térünk ki nagyítás).

Itt van egy egyszerűsített jelölés, amely az SVG-t mutatja viewBox és a width és a height attribútumok egyaránt be vannak állítva a <svg>:

<svg viewBox="0 0 700 700" width="700" height="700"> <!-- etc. -->
</svg>

Átkeretezés

Szóval ez:

<svg viewBox="0 0 700 700">

…térképek ehhez:

<svg viewBox="start-x-axis start-y-axis width height">

A látott nézet ahol kezdődik 0 az x tengelyen és 0 az y tengelyen találkoznak.

Ennek megváltoztatásával:

<svg viewBox="0 0 700 700">

…ehhez:

<svg viewBox="300 200 700 700">

…a szélesség és magasság ugyanaz marad (700 egységenként), de a koordinátarendszer kezdete most a 300 pont az x tengelyen és 200 az y tengelyen.

A következő videóban egy pirosat adok hozzá <circle> az SVG-hez, amelynek központja a 300 pont az x tengelyen és 200 az y tengelyen. Figyeld meg, hogyan változik a viewBox a koordináták ugyanazokra az értékekre változtatják a kör elhelyezését a keret bal felső sarkába, miközben az SVG renderelt mérete változatlan marad (700×700). Csak annyit tettem, hogy „átkereteztem” a dolgokat a viewBox.

nagyítás

Az utolsó két értéket megváltoztathatjuk a viewBox a kép nagyításához vagy kicsinyítéséhez. Minél nagyobbak az értékek, annál több SVG-egységet ad hozzá, hogy elférjen a nézetablakban, ami kisebb képet eredményez. Ha meg akarjuk tartani az 1:1 arányt, a mi viewBox szélességnek és magasságnak meg kell egyeznie a nézetablak szélessége és magassága értékeinkkel.

Nézzük meg, mi történik az Illustratorban, ha megváltoztatjuk ezeket a paramétereket. A rajztábla a viewport amelyet egy 700 képpontos fehér négyzet ábrázol. Minden más ezen a területen kívül a végtelen SVG-vásznunk, és alapértelmezés szerint le lesz vágva.

Az alábbi 1. ábrán egy kék pont látható 900 az x tengely mentén és 900 az y tengely mentén. Ha megváltoztatom az utolsó kettőt viewBox értékektől 700 nak nek 900 mint ez:

<svg viewBox="300 200 900 900" width="700" height="700">

…akkor a kék pont szinte teljesen visszakerül a látómezőbe, ahogy az alábbi 2. ábrán látható. A képünk kicsinyített, mert növeltük a viewBox értékeit, de az SVG tényleges szélessége és magassága változatlan maradt, és a kék pont visszakerült a levágatlan területhez.

Egy rózsaszín négyzet bizonyítja, hogy a rács mérete hogyan illeszkedik a nézetablakhoz: az egység kisebb lesz, és több rácsvonal illeszkedik ugyanahhoz a nézetablakhoz. A következő tollban ugyanazokkal az értékekkel játszhat, hogy működés közben is lássa:

2. Hiányzik width és a height

Egy másik gyakori dolog, amit megnézek a soron belüli SVG hibakeresése során, hogy a jelölés tartalmazza-e a width or height attribútumok. Ez sok esetben nem nagy baj, hacsak az SVG nem egy abszolút pozicionálású konténerben vagy egy rugalmas tárolóban van (ahogy a Safari kiszámolja az SVG-t width értékkel 0px helyett auto). Kizárás width or height ezekben az esetekben megakadályozza, hogy a teljes képet lássuk, amint azt látjuk megnyitja ezt a CodePen bemutatót és a Chrome, a Safari és a Firefox összehasonlítása (koppintson a képekre a nagyításhoz).

A megoldás? Adjon hozzá egy szélességet vagy magasságot, akár prezentációs attribútumként, akár a stílusattribútumban, akár a CSS-ben. Kerülje a magasság önmagában történő használatát, különösen, ha be van állítva 100% or auto. Egy másik megoldás az, hogy állítsa be a jobbot és a bal értékeket.

Játszhatsz vele a következő tollat és kombinálja a különböző lehetőségeket.

3. Véletlen fill és a stroke színek

Az is előfordulhat, hogy színt viszünk fel a <svg> címke, legyen az egy soron belüli stílus, vagy a CSS-ből származik. Ez rendben van, de lehetnek más színértékek a jelölésben, vagy olyan stílusok, amelyek ütköznek a képen beállított színnel <svg>, ami miatt az alkatrészek láthatatlanok lesznek.

Ezért szoktam keresni a fill és a stroke attribútumokat az SVG jelölésében, és törölje őket. A következő videó egy SVG-t mutat be, amelyet CSS-ben formáltam pirossal fill. Van néhány olyan eset, amikor az SVG részei fehérrel vannak kitöltve közvetlenül a jelölésben, amelyet eltávolítottam, hogy felfedjem a hiányzó részeket.

4. Hiányzó azonosítók

Ez nagyon kézenfekvőnek tűnhet, de meglepődnél, milyen gyakran látom előkerülni. Tegyük fel, hogy készítettünk egy SVG-fájlt az Illustratorban, és nagyon szorgalmasan elneveztük a rétegeinket, hogy a fájl exportálásakor szépen egyező azonosítókat kapjon a jelölésben. És mondjuk azt tervezzük, hogy az SVG-t CSS-ben úgy alakítjuk ki, hogy azokhoz az azonosítókhoz kapcsoljuk.

Ez egy szép módja a dolgoknak. De rengetegszer láttam, hogy ugyanazt az SVG-fájlt másodszor is exportálták ugyanarra a helyre, és az azonosítók eltérőek, általában a vektorok közvetlen másolásakor/beillesztésekor. Lehet, hogy egy új réteget adtak hozzá, vagy valamelyik meglévőt átnevezték, vagy ilyesmi. Bárhogy is legyen, a CSS-szabályok már nem egyeznek az SVG-jelölésben szereplő azonosítókkal, így az SVG a várttól eltérően jelenik meg.

A nagy SVG-fájlokban nehezen találhatjuk meg ezeket az azonosítókat. Ez a megfelelő alkalom a DevTools megnyitására, megvizsgálja a grafika azon részét, amely nem működik, és ellenőrizze, hogy az azonosítók még mindig egyeznek-e.

Szóval, azt mondanám, hogy érdemes megnyitni egy exportált SVG fájlt egy kódszerkesztőben, és összehasonlítani az eredetivel, mielőtt kicserélnénk a dolgokat. Az olyan alkalmazások, mint az Illustrator, a Figma és a Sketch, okosak, de ez nem jelenti azt, hogy nem vagyunk felelősek az ellenőrzésükért.

5. Ellenőrző lista a vágáshoz és a maszkoláshoz

Ha egy SVG váratlanul levágásra kerül, és a viewBox rendben van, általában a CSS-t nézem clip-path or mask olyan tulajdonságokat, amelyek zavarhatják a képet. Csábító, hogy folyton a soron belüli jelölést nézzük, de jó emlékezni arra, hogy az SVG stílusa máshol is előfordulhat.

CSS-kivágás és maszkolás lehetővé teszi számunkra, hogy „elrejtsük” egy kép vagy elem egyes részeit. SVG-ben, <clipPath> egy olyan vektoros művelet, amely a kép egyes részeit félúton kivágja. Az <mask> A címke egy pixelművelet, amely lehetővé teszi az átlátszóságot, a félig átlátszó hatásokat és az élek elmosódását.

Ez egy kis ellenőrzőlista olyan hibakeresési esetekhez, amelyekben a vágás és a maszkolás érintett:

• Győződjön meg arról, hogy a vágógörbe (vagy maszk) és a grafika átfedi egymást. Az egymást átfedő részek jelennek meg.
• Ha olyan összetett útvonala van, amely nem metszi a grafikát, próbáljon meg átalakításokat alkalmazni, amíg nem egyezik.
• A belső kódot továbbra is ellenőrizheti a DevTools segítségével, annak ellenére, hogy a <clipPath> or <mask> nem jelennek meg, ezért használd!
• Másolja be a jelölést <clipPath> és a <mask> és illessze be, mielőtt bezárja a </svg> címke. Ezután adjunk hozzá a fill ezekhez az alakzatokhoz, és ellenőrizze az SVG koordinátáit és méreteit. Ha továbbra sem látja a képet, próbálja meg hozzáadni overflow="hidden" hoz <svg> címke.
• Ellenőrizze, hogy a egyedi Az azonosítót használják a <clipPath> or <mask>, és hogy ugyanaz az azonosító kerül alkalmazásra a kivágott vagy maszkolt alakzatokra vagy alakzatcsoportokra. A nem egyező azonosító tönkreteszi a megjelenést.
• Ellenőrizze az elírási hibákat a jelölésekben a <clipPath> or <mask> címkéket.
• fill, stroke, opacity, vagy más stílusok, amelyek a benne lévő elemekre vonatkoznak <clipPath> haszontalanok – az egyetlen hasznos rész ezeknek az elemeknek a kitöltési terület geometriája. Éppen ezért, ha a <polyline> úgy fog viselkedni, mint a <polygon> és ha a <line> nem fog látni semmilyen vágási effektust.
• Ha az alkalmazás után nem látja a képét a <mask>, ellenőrizze, hogy a fill a maszk tartalom nem teljesen fekete. A maszkoló elem fénysűrűsége határozza meg a végső grafika átlátszatlanságát. Átláthat a világosabb részeken, a sötétebb részek pedig elrejtik a kép tartalmát.

Játszhatsz benne maszkolt és nyírt elemekkel ezt a tollat.

6. Névterek

Tudta, hogy az SVG egy XML-alapú jelölőnyelv? Hát igen! Az SVG névterét a xmlns tulajdonság:

<svg xmlns="http://www.w3.org/2000/svg"> <!-- etc. -->
</svg>

Sokat kell tudni az XML névtávolságáról, és az MDN-nek nagyszerű alapozója van. Elég annyit mondanunk, hogy a névtér kontextust biztosít a böngésző számára, tájékoztatva arról, hogy a jelölés az SVG-re jellemző. Az ötlet az, hogy a névterek segítenek elkerülni az ütközéseket, ha egynél több típusú XML van ugyanabban a fájlban, például SVG és XHTML. Ez sokkal kevésbé gyakori probléma a modern böngészőkben, de segíthet megmagyarázni az SVG-megjelenítési problémákat a régebbi böngészőkben, vagy olyan böngészőkben, mint a Gecko, amelyek szigorúak a dokumentumtípusok és névterek meghatározásakor.

Az SVG 2 specifikáció nem igényel névközt HTML szintaxis használatakor. De ez döntő fontosságú ha a régebbi böngészők támogatása prioritást élvez – ráadásul semmit sem árt hozzáadni. Így, amikor a <html> elemek xmlns attribútum definiálva van, nem ütközik azokban a ritka esetekben.

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <body> <svg xmlns="http://www.w3.org/2000/svg" width="700px" height="700px"> <!-- etc. --> </svg> </body>
</html>

Ez akkor is igaz, ha beépített SVG-t használ CSS-ben, például háttérképként állítja be. A következő példában egy pipa ikon jelenik meg a bemeneten a sikeres érvényesítés után. Így néz ki a CSS:

textarea:valid { background: white url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26"> <circle cx="13" cy="13" r="13" fill="%23abedd8"/> <path fill="none" stroke="white" stroke-width="2" d="M5 15.2l5 5 10-12"/> </svg>') no-repeat 98% 5px;
}

Ha eltávolítjuk a névteret az SVG-ben a háttértulajdonságban, a kép eltűnik:

Egy másik gyakori névtér előtag az xlink:href. Gyakran használjuk, amikor az SVG más részeire hivatkozunk, mint például: minták, szűrők, animációk vagy színátmenetek. Javasoljuk, hogy kezdje el lecserélni href mivel a másik az SVG 2 óta elavult, de előfordulhatnak kompatibilitási problémák a régebbi böngészőkkel. Ebben az esetben mindkettőt használhatjuk. Ne felejtse el megadni a névteret xmlns:xlink="http://www.w3.org/1999/xlink" ha még mindig használja xlink:href.

Növelje SVG készségeit!

Remélem, hogy ezekkel a tippekkel rengeteg időt takaríthat meg, ha a nem megfelelően renderelt beágyazott SVG-k hibaelhárítása során találja magát. Csak ezeket a dolgokat keresem. Lehet, hogy vannak különböző piros zászlóid, amelyekre figyelsz – ha igen, mondd el a megjegyzésekben!

A lényeg az, hogy érdemes legalább alapvető ismeretekkel rendelkezni az SVG különféle felhasználási módjai. CodePen kihívások gyakran beépítik az SVG-t, és jó gyakorlatot kínálnak. Íme néhány további forrás a szintlépéshez:

Javaslom, hogy kövessen néhány embert az SVG-vel kapcsolatos jóság miatt:

• SEO által támogatott tartalom és PR terjesztés. Erősödjön még ma.
• Platoblockchain. Web3 metaverzum intelligencia. Felerősített tudás. Hozzáférés itt.
• Forrás: https://css-tricks.com/6-common-svg-fails-and-how-to-fix-them/