SVGCSS átalakítás, Kortic

Tanács: Ha látunk néhány meglehetősen nagy fájlt, akkor a források konvertálása előtt erősen ajánlott ellenőrizni, hogy a fájl nem tartalmaz-e adattípus kódot: img/png; base64. Ebben az esetben a képe nem vektor ... A megosztásról: a "megosztás" céljából a beküldött fájlokat névtelenül menti és mindenki számára hozzáférhető. Ha nem szeretné, hogy a fájlja elérhető legyen, itt kérheti a törlését.

jQuery érzékeny háttérkép

Az UX Planet-en beszélünk róla

SVG átalakítás

Hogyan működik ?

A piktogramok és más logók integrációja egy weboldalon különböző módon történik: svg inline, img stb. A CSS-n keresztül történő integráláshoz azt is megtehetjük, hogy a base64 kódolja az SVG tartalmát a kb. %.

És nagy mennyiségű SVG és egy kicsit nagyobb webes teljesítmény érdekében egy másik lehetőség (tovább) egy lépéssel tovább

Példa

Ez a kód narancssárga "+" piktogramot jelenít meg. A kódolás után az XML kihasználható karakterláncot ad a CSS háttérképében, amely a következőket adja:

Tömeges példák

Exportálja a "tiszta" SVG-ket

Az alábbiakban az átalakítóhoz elküldött SVG kódja található.

Ez a kód viszonylag tiszta, de könnyen optimalizálható. Jelenleg az SVG súlya 1673 bájt. De alaposabban megvizsgálva vannak olyan tulajdonságok, amelyeket anélkül is megtehetünk, hogy károsítanánk a grafikai eredményt.

Eltávolíthatja a width = "35" height = "35" méretattribútumokat és a fill = "none" formázást. .
A még szórakoztatóbb használat érdekében hozzáadunk egy viewBox = "0 0 35 35" értéket. És hopp, nagyon érzékeny SVG! De ez még nem minden ... Az SVG útvonala kitöltési értéket ad meg: "# 000" .
Jelenleg nem jelent problémát, de haszontalan. A megadott szín fogalma nélküli útvonal fekete, bármi is. Ugorj, ugorj, mi is levesszük, ez a lány .
Rendben, de akkor mi van? Nos, kinyitjuk az Illustrator programot, és exportálni fogjuk ezt a fájlt, de a paraméterek kissé konfigurálásával.

Válassza a „Fájl› Export… ›Exportálás képernyőkhöz” menüt (a billentyűparancs használata számomra hasznosnak tűnik).

Ebben a párbeszédpanelen válassza a "Formátum" opciótárcsát.
A konfigurációs mező az egyes lehetséges exportálási formátumokhoz különféle lehetőségeket kínál. Az SVG részben tegye a paramétereket az alábbiak szerint.
Ez a konfiguráció optimális SVG-k exportálását teszi lehetővé legjobb esetben.