Conversie SVGCSS, Kortic

Sfat: văzând că unele fișiere destul de mari trec, este recomandat să verificați înainte de a vă converti sursele dacă fișierul dvs. nu conține codul tipului de date: img/png; base64. În acest caz, imaginea dvs. nu este vectorială ... Despre partajare: în vederea „partajării”, fișierele trimise sunt salvate anonim și sunt accesibile tuturor. Dacă nu doriți ca fișierul dvs. să fie accesibil, puteți solicita ștergerea acestuia aici.

cardului bancar

Vorbim despre asta pe UX Planet

Conversie SVG

Cum functioneaza ?

Integrarea pictogramelor și a altor logo-uri într-un site web se face în moduri diferite: svg inline, img, etc ... Pentru integrare prin CSS o putem face și prin codarea bazei 64 a conținutului SVG în detrimentul unei supraponderale de aproximativ 30 %.

Și pentru volume mari de SVG și puțină performanță web, o altă opțiune (de a merge) un pas mai departe

Exemplu

Acest cod va afișa o pictogramă portocalie "+". Odată codificat, XML va furniza un șir exploatabil de caractere într-o imagine de fundal CSS, care va da:

Exemple în vrac

Exportați SVG-uri „curate”

Mai jos este codul unui SVG care a fost trimis convertorului.

Acest cod este relativ curat, dar poate fi ușor optimizat. Într-adevăr, SVG are o greutate de 1673 octeți. Dar, la o inspecție mai atentă, există atribute pe care le putem face fără a afecta rezultatul grafic.

Puteți elimina atributele de dimensiune width = "35" height = "35" și formatare fill = "none" .
Pentru a face și mai distractiv de utilizat, adăugăm un viewBox = "0 0 35 35". Și hop, un SVG foarte receptiv! Dar asta nu este tot ... Calea SVG specifică o umplere = "# 000" .
Așa cum este, nu este o problemă, dar este inutilă. O cale fără noțiune de culoare specificată este neagră, indiferent de ce. Du-te hop, o luăm și noi, fata asta .
Bine, dar apoi ce? Ei bine, ne deschidem Illustrator-ul și vom exporta acest fișier, dar configurând puțin parametrii.

Selectați meniul „Fișier› Export ... ›Export pentru ecrane” (folosirea comenzii rapide de la tastatură mi se pare utilă).

În această casetă de dialog, selectați cadranul de opțiuni la „Format”.
Caseta de configurare oferă diferite opțiuni pentru fiecare format de export posibil. În partea SVG, puneți parametrii după cum urmează.
Această configurație permite exportul SVG optimizat în cel mai bun caz.