Imagyc›Artículos

Cómo convertir PNG a SVG y usarlo en tu web sin errores

Publicado el 10 de octubre de 2026 · 16 min de lectura

¿Tu logotipo muestra bordes dentados al ampliarlo? ¿El icono cambia de color en Elementor o deja de aparecer? Antes de buscar otro convertidor, conviene revisar qué contiene el archivo. Una imagen con extensión .svg puede guardar formas vectoriales, una fotografía de píxeles o una combinación de ambas.

Para convertir PNG a SVG gratis y obtener un resultado útil, necesitas una imagen de origen clara y una herramienta que trace el dibujo. En Imagyc, Convertir a SVG crea dibujos de un color: iconos, logotipos e incluso fotos con estilo de esténcil. La compresión y la conversión de formatos del sitio cubren otras tareas, como preparar fotografías para la web.

Si ya tienes un logotipo o un icono, abre Convertir a SVG de Imagyc mientras lees esta guía. Los ejemplos te ayudarán a elegir los ajustes, reconocer imágenes incrustadas y solucionar problemas antes de publicar.

Qué es SVG

SVG significa Scalable Vector Graphics, o gráficos vectoriales escalables. Es un formato basado en XML, un lenguaje de texto que describe dibujos. En lugar de guardar únicamente una cuadrícula de píxeles, puede definir círculos, líneas y trazados, llamados paths. Su código se puede abrir en un editor de texto.¹

Piensa en un círculo. Una imagen raster, como PNG o JPG, lo representa con pequeños píxeles de color. Un dibujo vectorial puede describirlo mediante su centro y su radio. El navegador utiliza esa descripción para dibujarlo al tamaño necesario.

Las formas vectoriales pueden ampliarse sin los bordes dentados que provoca la falta de píxeles. Esto no recupera detalles perdidos en el original ni se aplica a las imágenes raster incrustadas en el SVG. El formato también admite texto, estilos y otros recursos, además de formas sencillas.²

Para un icono pequeño, esta diferencia facilita utilizar la misma geometría en ordenador y móvil. Aun así, revisa el dibujo en su tamaño real. Un detalle demasiado fino puede dejar de distinguirse en un botón de 24 píxeles aunque sea vectorial.

Cuándo usar SVG y cuándo elegir otro formato

SVG suele funcionar bien para logotipos, iconos, diagramas e ilustraciones con contornos definidos y zonas de color. Las fotografías generalmente resultan más eficientes en formatos raster como JPEG, WebP y AVIF. PNG es una opción cuando se necesita compresión sin pérdidas o transparencia.^{3, 4}

El canal también influye. Un SVG adecuado para tu web puede no ser aceptado por una plataforma publicitaria, una aplicación de mensajería o un sistema de correo. Prepara una versión raster para esos destinos cuando haga falta y conserva el original vectorial para futuras exportaciones.

El SVG estático básico tiene amplio soporte en navegadores actuales de ordenador y móvil, incluidos Chrome, Edge, Firefox, Safari, Chrome en Android y Safari en iPhone. Eso no implica que todos los filtros, fuentes o recursos avanzados funcionen igual. Conviene probar por separado los navegadores internos de aplicaciones y los editores.⁵

Vectores reales y SVG con imágenes incrustadas

Lo que suele llamarse SVG “falso” es un archivo que coloca un PNG o JPG dentro de un contenedor SVG. El formato lo permite. La diferencia relevante es que la imagen incrustada sigue siendo raster: cambiar el contenedor no convierte sus píxeles en curvas.^{6, 7}

Para una primera inspección, crea una copia y ábrela en el Bloc de notas u otro editor de texto. Busca <image> y revisa el atributo href, o el antiguo xlink:href. Un fragmento como este indica un PNG incrustado:

<image href="data:image/png;base64,..." width="300" height="300" />

El fragmento es ilustrativo. Los puntos sustituyen los datos de la imagen, por lo que no forman un archivo utilizable. El prefijo data:image/jpeg;base64, indica JPEG. Una dirección de archivo puede apuntar a una imagen externa. <image> también puede referenciar otro SVG; su presencia, por sí sola, no demuestra que el contenido sea raster.^{6, 7, 8}

Elementos como <path>, <circle> y <rect> indican geometría vectorial. Un archivo puede combinar estas formas con fotografías. Revisa la parte que necesitas ampliar. La inspección ayuda a entender la estructura, pero no verifica la seguridad del archivo.

Cómo convertir PNG o JPG a SVG

Vectorizar consiste en reconstruir el dibujo mediante contornos y formas. La herramienta analiza la imagen, identifica regiones y genera trazados. El resultado depende del contraste, del ruido y de los detalles que deba interpretar. Las fotos pueden producir muchas formas o adquirir un aspecto de póster con menos tonos.⁹

Empieza por la mejor versión disponible. Es preferible un PNG con transparencia real o un fondo de color uniforme que separe claramente la figura. Una imagen más grande ayuda si contiene detalles reales; ampliar artificialmente un archivo pequeño no recupera bordes ya perdidos.

Antes de convertir, comprueba que el cuadriculado sea solo la vista de transparencia. Algunas imágenes lo llevan grabado en los píxeles y se trazará como parte del dibujo. Elimina también márgenes excesivos y elementos que no deban aparecer en el icono.

Un proceso práctico en Imagyc

1. Abre Convertir a SVG y elige el archivo. Además de PNG, JPG y WebP, abre PDF, AI, PSD, TIFF, HEIC y SVG. Para un logotipo, empieza con el original transparente o con el PDF.
2. Comprueba qué regiones deben formar el dibujo. En un logotipo, la selección de colores separa el icono de las zonas que quedarán transparentes; en una foto, el modo esténcil decide por la luz y la sombra.
3. Ajusta el detalle poco a poco y revisa los contornos. Más detalle puede conservar curvas pequeñas, pero también ruido que no interesa.
4. Utiliza con cuidado los ajustes de grosor y manchas. Compara con el original para no cerrar letras ni borrar puntos importantes.
5. Elige color fijo o currentColor. Revisa el marco, las dimensiones y el aspecto sobre fondos claros y oscuros.
6. Descarga el SVG y pruébalo donde lo utilizarás. El objetivo es un dibujo reconocible y bien dimensionado, no solo un archivo más pequeño.

Convertir a SVG de Imagyc trabaja con un color de dibujo. No reproduce todos los colores de una fotografía o de un logotipo complejo: para conservar una marca con varios colores, utiliza Vectorizar de Imagyc, que mantiene la paleta en capas, y revisa cada región.

PNG192 × 192 px · ampliado 5×

SVG3,4 KB · 4 contornos · mismo zoom

Iconos de un color y SVG de varios colores

Un icono monocromático utiliza un color de dibujo sobre un fondo que puede ser transparente. Un SVG bicolor tiene dos colores visibles; la transparencia no cuenta como otra tinta. En un logotipo de varios colores, cada área puede necesitar su propio relleno.

En SVG, fill define el relleno y stroke el contorno. currentColor utiliza la propiedad CSS color disponible en ese contexto. Un color fijo, como #1A5F7A, conserva el valor elegido salvo que otra regla de estilo lo sustituya.^{10, 11}

Cuando el SVG se inserta directamente en HTML, la página puede controlar su currentColor. En un archivo externo mostrado mediante <img>, el color del texto de la página no pasa automáticamente al dibujo. El editor debe ofrecer una integración compatible; seleccionar la opción no garantiza que funcione en todos los widgets.^{10, 4}

Elige currentColor para un icono que deba acompañar los estados de un botón o los temas claro y oscuro. Utiliza colores fijos para una marca cuya paleta deba mantenerse estable. Comprueba también el foco y el contraste, especialmente en pantallas pequeñas.

Qué es un SVG limpio

Para iconos web, un SVG limpio es un archivo sencillo con la geometría necesaria, dimensiones coherentes y pocas dependencias. Es un perfil práctico de publicación. No invalida los SVG con clases, estilos, degradados o máscaras, que son recursos admitidos por el formato.¹²

El viewBox describe la región interna de coordenadas: posición inicial, anchura y altura. Ayuda a relacionar el dibujo con el espacio donde se mostrará. Los atributos width y height proporcionan medidas explícitas, útiles en editores e integraciones.^{13, 14}

Este ejemplo original contiene un círculo con color fijo y un área interna de 24 por 24 unidades:

<svg xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 24 24" width="24" height="24">
  <circle cx="12" cy="12" r="8" fill="#1A5F7A" />
</svg>

Para un icono sencillo, es preferible declarar fill y stroke en las formas, sin clases ni bloques de estilos. Elimina scripts, dependencias externas y metadatos del programa prescindibles. Este perfil facilita la portabilidad y también requiere sanitización adecuada. Conserva lo que sostiene la apariencia y la accesibilidad, incluidos títulos, descripciones y referencias internas necesarias. No borres créditos o información de licencia sin comprobar su finalidad.

Una ilustración con degradado puede necesitar <defs> e identificadores. Eliminarlo todo para “limpiar” puede romperla. Distingue también optimización y sanitización: un código más corto no demuestra que sea seguro.¹⁵

SVG en WordPress y Elementor

WordPress no habilita SVG en su configuración estándar de subidas. En Elementor, las opciones para aceptarlo dependen de la versión y de los recursos disponibles. SVG puede incluir contenido activo, de modo que permitir la extensión y evaluar su seguridad son tareas distintas.^{16, 17, 18}

Utiliza una solución mantenida que sanitice SVG, limita las subidas a personas de confianza y prueba primero en una copia de ensayo del sitio. Mantén actualizados WordPress, Elementor y el mecanismo de sanitización. Si habilitas SVG mediante una opción de Elementor, lee el aviso y comprueba cómo se filtrarán los archivos.

Evita tutoriales que permiten cualquier archivo con ALLOW_UNFILTERED_UPLOADS. La documentación de WordPress advierte del riesgo de aceptar archivos ejecutables. Un filtro que añade SVG a los tipos MIME permitidos tampoco es un sanitizador.^{19, 18}

Después de subir el archivo, revisa qué widget utilizas. Un widget de imagen, uno de icono y un recurso específico para SVG pueden tratar el color y el tamaño de forma diferente. Los ajustes del editor no sustituyen la revisión de la página publicada.²⁰

La ausencia de viewBox no explica todos los SVG invisibles. Los navegadores pueden mostrar archivos sin él. Tampoco omitir width y height determina por sí solo un tamaño cero; importa el contexto de dimensionado. Para facilitar la compatibilidad, declara medidas y un viewBox coherente.^{13, 14}

Muchas formas utilizan inicialmente negro como relleno. Perder la regla de color puede explicar el cambio. Un PNG incrustado puede funcionar, depender de una URL externa o ser eliminado por un filtro concreto.^{6, 21}

Archivos AI EPS CDR PDF y PSD

Si el dibujo se creó con vectores, procura conservar sus curvas. Illustrator exporta SVG y CorelDRAW también admite el formato. Pedir la exportación a quien diseñó la pieza suele ofrecer más control sobre colores, fuentes, efectos y límites del dibujo.^{22, 23}

Sin el programa original, Inkscape puede abrir varios formatos, incluidos determinados archivos AI, PDF, EPS y CDR. La compatibilidad depende de la versión del archivo y de las bibliotecas instaladas; EPS puede requerir componentes adicionales. Revisa fuentes, colores y efectos antes de guardar una copia como SVG simple.²⁴

PSD es un formato de trabajo de Photoshop que puede combinar distintos tipos de contenido. Para un icono raster, exportar PNG y vectorizar puede servir. Para una fotografía, conserva el raster y utiliza las conversiones y transformaciones de Imagyc para preparar la versión de publicación.²⁵

Convertir a SVG de Imagyc abre PDF, AI guardado con compatibilidad PDF y PSD directamente en el navegador: la página o la imagen compuesta se dibuja en alta resolución y se vectoriza de nuevo, en un color. Es práctico cuando no tienes el programa original, pero no recupera las curvas exactas ni los colores de la obra; para eso, exportar desde el editor de origen sigue siendo el mejor camino. EPS y CDR no se abren en el navegador, y cambiar la extensión no lo resuelve. Como el archivo no se envía a ningún servidor, este camino también sirve para diseños de clientes y materiales confidenciales.

Peso y rendimiento

Las dimensiones declaradas de un SVG vectorial no determinan su peso como lo hacen en una cuadrícula de píxeles. Un dibujo sencillo de 512 unidades puede ser pequeño; un icono visualmente menor puede contener miles de puntos. Curvas redundantes, filtros e imágenes incrustadas aumentan la complejidad.^{26, 27}

Ajusta el detalle al tamaño de uso. En un icono de menú, conservar cada irregularidad del PNG suele aportar poco. En un logotipo, simplificar demasiado puede cambiar la identidad. Compara el contorno y la lectura a tamaño real antes de aceptar la reducción.

Herramientas como SVGO eliminan o reorganizan información redundante. Trabaja sobre una copia y compara el resultado: cambiar identificadores o estilos puede afectar a las integraciones. Optimizar no debe eliminar información útil ni servir como prueba de sanitización.²⁸

Como SVG es texto, su transferencia puede comprimirse con gzip o Brotli si servidor y cliente negocian esa opción. No todas las configuraciones de alojamiento la aplican automáticamente. En el panel de red del navegador, revisa Content-Encoding y el tamaño realmente transferido.^{26, 29}

Para publicar, un archivo .svg servido correctamente suele ser más fácil de administrar que distribuir .svgz sin revisar la configuración. La extensión comprimida necesita soporte adecuado en el destino. Evalúa la caché y la compresión HTTP junto con el archivo.^{24, 29}

No existe un umbral de kilobytes que haga adecuado cualquier SVG para SEO. Mide la página con el recurso real. Menos datos ayudan en conexiones limitadas, pero dibujos muy complejos también pueden exigir procesamiento a móviles menos potentes. La calidad visual y el coste de renderizado influyen en la elección.

Seguridad al trabajar con SVG

SVG puede incluir scripts, atributos de eventos y referencias a otros recursos. Por eso, un archivo de terceros necesita evaluación y sanitización antes de incorporarse al sitio. Eliminar el nombre del programa u otros metadatos no elimina esos riesgos.³⁰

El contexto de uso cambia el comportamiento. SVG mostrado como imagen mediante <img> tiene restricciones, incluida la desactivación de scripts. Abrir el mismo archivo como documento o insertarlo directamente en HTML es otra situación. Una vista previa inofensiva no demuestra seguridad para todos los usos.³¹

El proceso de subida debe validar el contenido, aplicar reglas de elementos y atributos permitidos y restringir quién envía archivos. Utiliza un sanitizador mantenido y específico para SVG. Buscar y borrar manualmente la palabra “script” no cubre todas las posibilidades; OWASP recomienda varias verificaciones para las subidas.³²

Conserva el original fuera del área pública cuando sea necesario y mantén una versión revisada para publicar. Los iconos estáticos no deberían incluir código ni dependencias externas que no utilizan. Si la limpieza cambia el aspecto, corrige la exportación en lugar de desactivar el filtro de seguridad.

SVG accesibilidad y Google

Google admite SVG entre los formatos de imagen compatibles con la Búsqueda. Esto no garantiza indexación ni lo sitúa por encima de PNG. Siguen siendo importantes el acceso al recurso, la relevancia de la página y el contexto de la imagen. Utiliza un nombre descriptivo y texto cercano que explique su función.³³

Cuando el SVG es un archivo externo, el texto alternativo se coloca en la etiqueta HTML <img>. Describe qué comunica la imagen en esa página; para una imagen decorativa utiliza alt="". Un logotipo que identifica a la empresa necesita una descripción adecuada al contexto, sin acumular palabras clave.³⁴

<img src="logo-imagyc.svg" alt="Imagyc"
  width="160" height="40">

Estas medidas son un ejemplo, no el tamaño obligatorio de un logotipo. Conserva la proporción del archivo y ajusta el espacio del diseño. En móvil, comprueba que la imagen cabe en el contenedor y que el texto y los controles cercanos siguen siendo legibles.

Para SVG insertado directamente en HTML, <svg> no recibe el atributo alt utilizado por <img>. Puedes proporcionar un nombre accesible mediante <title> y aria-labelledby. Usa identificadores únicos cuando haya varias instancias.³⁵

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
  width="24" height="24" role="img" aria-labelledby="sello1">
  <title id="sello1">Sello de confirmación</title>
  <circle cx="12" cy="12" r="8" fill="#1A5F7A" />
</svg>

En un botón, el nombre accesible debe explicar la acción, como “Abrir menú”. Un icono decorativo junto a una etiqueta suficiente puede ocultarse a las tecnologías de asistencia. La descripción debe ayudar a comprender o utilizar la página.³⁶

Para preparar los demás archivos de tu sitio, consulta también las guías de Imagyc sobre formatos de imagen y cómo nombrar imágenes para SEO.

Checklist antes de publicar un SVG

• El formato corresponde al contenido y es aceptado por el destino.
• La parte que necesita ampliarse contiene vectores y no solo un raster incrustado.
• El dibujo se ha comparado con el original, incluidas letras, huecos y detalles pequeños.
• El viewBox cubre el dibujo, las medidas son coherentes y la proporción es correcta.
• El color fijo o currentColor funciona en el widget y los fondos reales.
• El archivo ha pasado el proceso de seguridad adecuado a su origen y uso.
• La optimización ha conservado degradados, referencias, accesibilidad e información necesaria.
• Se han comprobado el peso transferido y la compresión en la web publicada.
• El texto alternativo o nombre accesible corresponde a la función de la imagen.
• La página se ha probado en ordenador y móvil, además de la vista del editor.

Preguntas frecuentes

SVG es mejor que PNG

Para formas que necesitan ampliarse, SVG puede ser más práctico. PNG funciona bien para contenido raster sin pérdidas. Compara el dibujo, el peso y el destino: un SVG complejo no es automáticamente más ligero que un PNG adecuado.³

Se puede transformar una foto en SVG

Sí, mediante vectorización, pero el resultado simplifica los tonos. En Imagyc, el modo esténcil convierte la foto en un dibujo de un color: la piel queda transparente, y el pelo, los ojos, la boca y las sombras se vuelven trazo. Incrustar la fotografía en SVG conserva los píxeles, y para mostrar una fotografía fiel en una web suele tener más sentido optimizar un formato raster.^{7, 9}

Por qué mi SVG no aparece en Elementor

Comprueba que la subida se aceptó, que la URL funciona y que la sanitización conservó el dibujo. Después revisa viewBox, colores, CSS y espacio en el widget. Una medida ausente no explica todos los casos.^{16, 20}

Cómo abrir un archivo SVG

Un navegador actual puede mostrar un SVG estático. Un editor vectorial permite modificar las formas y un editor de texto muestra el código. Evalúa la seguridad de archivos desconocidos antes de abrirlos o publicarlos.^{1, 30}

Puedo convertir PNG a SVG gratis sin conservar todos los colores

Sí. Un icono de un color puede servir para botones y menús. En Imagyc, revisa el contorno y elige color fijo o currentColor; para una marca de varios colores, usa Vectorizar, que conserva todos los colores.

Quitar metadatos hace seguro el SVG

No. Metadatos, estructura visual y contenido activo son aspectos distintos. La versión de publicación necesita sanitización y revisión adecuadas aunque no incluya información del programa que la creó.

Elige un icono sencillo y pruébalo en Convertir a SVG de Imagyc. Compara el resultado a tamaño real y utiliza el checklist para revisar la versión que publicarás en tu sitio.