SVG în HTML

Convertește SVG în HTML online

Importă un fișier SVG sau lipește-i codul ca să obții un SVG inline pentru o pagină HTML. Previzualizează rezultatul, ajustează setările de optimizare și copiază codul. Analiza, optimizarea și conversia se fac local, în browserul tău, fără ca SVG-ul să fie trimis la un server.

Pregătește un SVG inline responsive

Păstrează viewBox ca să menții sistemul de coordonate al SVG-ului. Elimină lățimea și înălțimea fixe când SVG-ul are un viewBox utilizabil, apoi stabilește-i dimensiunea în propriul CSS.

Înțelege mărimea SVG-ului și economia obținută

„Mărime inițială” este mărimea SVG-ului introdus. „Mărime SVG optimizat” este mărimea lui după procesarea cu opțiunile alese, de exemplu eliminarea comentariilor, rotunjirea coordonatelor și minificarea codului. Mărimile sunt afișate în kB, unde 1 kB înseamnă 1.000 de octeți. „Economie” este reducerea procentuală: de la 10 kB la 7 kB, economisești 30%. Dacă rezultatul este mai mare, de exemplu din cauza unei formatări lizibile, se afișează în schimb „Creștere de mărime”. Aceste cifre compară codul SVG, nu mărimea exporturilor JSX, React, Data URI CSS sau Base64.

Precizia zecimală și indentarea

Precizia zecimală stabilește câte cifre se păstrează după virgulă în coordonate și în atributele numerice. Cu o precizie de 2, 12,34567 devine 12,35. Mai puține zecimale pot reduce mărimea fișierului, dar pot altera detaliile fine; valoarea implicită 3 este doar un punct de plecare, așa că verifică previzualizarea. Indentarea folosește 2 spații, 4 spații sau taburi ca să facă codul HTML și JSX mai ușor de citit, fără să schimbe imaginea. „Minifică SVG-ul” elimină spațiile de formatare inutile ca să compacteze rezultatul, așa că indentarea este dezactivată cât timp minificarea este activă.

HTML, JSX, React și Data URI SVG

Rezultatul HTML este cod SVG inline și se descarcă sub forma unui fișier SVG. JSX adaptează numele atributelor și stilurile inline pentru React. „Componentă React” îl încadrează într-o funcție TypeScript care acceptă props SVG standard. „Data URI CSS” produce o declarație background-image, iar „Base64” produce un URI de imagine SVG codificat. Statisticile de mărime descriu SVG-ul optimizat, nu formatele codificate, mai mari. Verifică ID-urile înainte de a folosi mai multe copii inline pe aceeași pagină.

Un flux de lucru SVG static și local

Previzualizarea este o imagine izolată, nu cod executabil în pagină. Scripturile, HTML-ul încorporat, animațiile, imaginile externe și foile de stil sunt eliminate. Stilurile de prezentare inline acceptate și referințele locale la fragmente sunt păstrate. Acest instrument este conceput pentru desene statice; funcțiile neacceptate îi pot schimba aspectul. currentColor modifică umplerile și contururile de culoare uniformă și își moștenește culoarea când este folosit inline; previzualizarea ca imagine folosește propriul context de culoare.