Visor SVG

Entrada SVG
0 caràcters
Vista prèvia local, no enganxis contingut d'scripts de fonts no confiables

Visor SVG en línia. Enganxa el codi SVG per renderitzar i previsualitzar la imatge vectorial a l'instant en temps real. Amb suport per a còpia i descàrrega de fitxers .svg. Processament local — utilitza'l amb seguretat.

Relacionats

Convertir imatges

Comprimir imatges

Redimensionar imatges

Retallar imatges

editor d'imatges

Generador ICO

Què és SVG?

SVG (Scalable Vector Graphics, gràfics vectorials escalables) és un format d'imatge que descriu formes geomètriques mitjançant XML. A diferència de JPG i PNG, que són mapes de bits (matriu de píxels), SVG utilitza etiquetes com <rect>, <circle>, <path> per descriure els camins matemàtics de les formes, per tant la imatge no es difumina en escalar-la a qualsevol mida.

**Per a quins escenaris és adequat SVG?** Logotips, icones UI, diagrames de flux, marcadors de mapes, gràfics, decoracions animades, il·lustracions reutilitzables — en aquests escenaris els requisits de nitidesa, capacitat de canvi de color, escalabilitat i control mitjançant CSS són alts, per tant SVG és l'elecció natural.

**Diferència amb Canvas:** Canvas és una API de dibuix imperativa; després de dibuixar, tot es converteix en píxels; SVG són nodes DOM declaratius, els atributs i estils CSS dels quals es poden canviar en qualsevol moment i es poden vincular esdeveniments. Per tant, per a icones, UI i escenaris interactius utilitza SVG, per a jocs, partícules i art píxel utilitza Canvas.

**Estructura típica:** &lt;svg&gt; node arrel, &lt;g&gt; agrupació, &lt;path&gt; camí (el més utilitzat, conté l'atribut d), gradients (&lt;linearGradient&gt;/&lt;radialGradient&gt;), filtres (&lt;filter&gt;), animació (SMIL/CSS/JS).

**Com previsualitzar:** Amb aquesta eina, enganxa el codi font SVG a l'editor — a la dreta es renderitzarà en temps real. Amb el separador arrossegable, pots comprovar en pocs segons si el codi SVG és correcte i si l'efecte de visualització coincideix amb les expectatives.

Casos d'ús

  • Quan els desenvolupadors frontend necessiten previsualitzar ràpidament el resultat de renderització del codi d'icones SVG
  • Per verificar l'efecte de visualització d'SVG després de copiar-lo de Figma, Sketch i altres eines de disseny
  • Per veure els canvis en temps real mentre es depuren camins, colors o l'atribut viewBox d'SVG
  • Per comprovar i validar el codi SVG abans d'integrar-lo al codi del projecte

Com usar-ho

  1. Enganxa el codi font SVG a l'editor de l'esquerra o fes clic a «Carrega exemple» per veure la demostració
  2. El resultat de renderització de la imatge vectorial es mostrarà instantàniament a la dreta; en editar el codi, la previsualització s'actualitzarà en temps real
  3. Després de comprovar, fes clic al botó de còpia per copiar el codi o descarrega'l com a fitxer .svg amb un nom personalitzat

Característiques

  • Previsualització en temps real: enganxa o edita codi SVG — la imatge vectorial es renderitza a l'instant, WYSIWYG
  • Disseny dividit: a l'ordinador arrossega per ajustar l'ample dels panells, al mòbil commuta entre entrada i previsualització amb pestanyes
  • Exportació amb un clic: copia el codi font SVG al porta-retalls o descarrega'l com a fitxer .svg estàndard amb un nom personalitzat
  • Processament local: tota l'anàlisi i renderització SVG es fa al navegador, el codi no es penja al servidor — més segur
  • Fons transparent: el fons de tauler d'escacs permet veure clarament les zones transparents i els detalls de les vores de l'SVG
  • Comptador de caràcters: mostra el nombre de caràcters del codi en temps real, amb exemples integrats per començar ràpidament

Preguntes freqients

Com puc previsualitzar l'efecte del codi SVG en línia?

Enganxa el codi font SVG a l'editor de l'esquerra i la imatge vectorial es renderitzarà instantàniament a la dreta. Pots editar el codi directament a l'editor, i l'àrea de previsualització s'actualitzarà en temps real — convenient per depurar icones i verificar efectes.

Com puc descarregar i desar l'SVG previsualitzat?

Fes clic al botó de descàrrega a la cantonada superior dreta de l'àrea de previsualització, especifica el nom del fitxer i desa'l com a fitxer .svg estàndard. També pots fer clic al botó de còpia per copiar el codi font SVG al porta-retalls i enganxar-lo directament al codi del projecte.

El codi SVG es penja al servidor? És segur?

No. Tota l'anàlisi i renderització d'SVG es fa localment al navegador, el codi SVG no es penja a cap servidor. Després del processament, les dades s'eliminen immediatament de la memòria, eliminant el risc de filtració de materials d'icones i esborranys de disseny no publicats.

Admet codi SVG copiat de programari de disseny?

Sí. El codi SVG copiat de Figma, Sketch, Adobe Illustrator i altres programes de disseny es pot enganxar directament per previsualitzar. Es recomana comprovar primer el resultat de la renderització i, si no hi ha problemes, integrar-lo al projecte.

Per què no es mostra la previsualització SVG? Causes habituals?

Causes habituals: ① manca de declaració d'espai de noms xmlns="http://www.w3.org/2000/svg"; ② etiquetes no tancades al codi; ③ caràcters especials no escapats correctament; ④ errors de sintaxi al propi SVG. Si us plau, comprova aquests punts.

Puc personalitzar el nom del fitxer SVG que baixo?

Sí. Després de fer clic al botó de descàrrega, apareixerà un camp per introduir el nom del fitxer, introdueix el nom desitjat (per defecte image.svg), prem Enter o confirma — el fitxer es descarregarà. L'eina afegirà automàticament l'extensió .svg.

Glossari

viewBox
Sistema de coordenades intern d'SVG, s'especifica en format «x y width height». El comú «0 0 24 24» significa que l'ample i l'alt són 24 unitats. La mida de visualització real d'SVG es controla mitjançant els atributs width/height o CSS extern.
Espai de noms XML (namespace)
Perquè el navegador reconegui correctament SVG com a document SVG, cal declarar xmlns="http://www.w3.org/2000/svg". La manca d'espai de noms és la causa més comuna per la qual SVG no es mostra a HTML.MDN - Espai de noms SVG
Atribut d del camí path
Conjunt d'ordres de camí formades per lletres com M/L/C/Q/H/V/Z i coordenades. M=moure's, L=dibuixar línia, C=corba Bézier cúbica, Q=corba Bézier quadràtica, Z=tancar camí. Les icones complexes sovint s'expressen només amb un element path i el seu atribut d.
currentColor
Paraula clau CSS que fa referència a la propietat color de l'element actual. Si a SVG estableixes fill o stroke com a currentColor, el canvi de color al CSS extern canviarà el color de la icona — és una pràctica habitual en sistemes de disseny.

Referència ràpida d'elements SVG habituals

ElementTipusPropòsit
<svg>Node arrelContenidor per a tots els SVG, obligatori
<rect>Forma bàsicaRectangle, rectangle amb cantonades arrodonides
<circle> / <ellipse>Forma bàsicaCercle / El·lipse
<line> / <polyline>Forma bàsicaLínia recta / Polilínia
<polygon> / <path>CamíPolígon / Corba arbitrària (atribut d)
<text> / <tspan>TextText incrustat en SVG
<g>AgrupacióAgrupar nodes per aplicar transformacions uniformement
<defs> / <symbol>DefinicionsFormes i gradients reutilitzables
<linearGradient> / <radialGradient>GradientEmplenat amb gradient lineal / radial
<use>ReutilitzacióReferenciar un element de defs
<filter>FiltreDifuminat, ombres i altres efectes avançats

Comparació entre SVG i formats de mapa de bits

ParàmetreSVG (vectorial)PNG (mapa de bits)JPG (mapa de bits)
Forma de representacióXML descriu camins geomètricsMatriu de píxelsMatriu de píxels (compressió DCT)
Efecte en ampliarNo es difumina a cap escalaEs difumina en ampliarEs difumina, les marques de compressió són evidents
Mida del fitxerDepèn de la complexitat dels camins, els logotips solen ser < 10KBMitjana (sense pèrdua)Petita (amb pèrdua)
Fons transparent✅✅❌
Suport d'animació✅ SMIL / CSS / JS❌ (cal APNG)❌
Canvi de color amb CSS✅ currentColor / variables fill❌❌
Usos adequatsIcones, logotips, vectors UIMaterials amb fons transparent, captures de pantallaFotografies, gradients grans

Authoritative References