Cómo convertir un SVG a CSS

Por qué meter un SVG en la hoja de estilos

Un icono pequeño no siempre merece un archivo propio y una petición propia. Un data URI guarda el dibujo dentro del CSS, y el navegador lo pinta igual como vector. Es otra tarea que exportar un PNG: la forma sigue nítida a cualquier tamaño y no hay un archivo de imagen que publicar.

El convertidor de SVG a CSS convierte el marcado SVG en ese URI, en el navegador. Eliges un preajuste: un url(...) solo, una línea background-image, una regla de fondo más completa, una viñeta de lista o una clase. No se sube nada.

Paso a paso

1. Abre el convertidor de SVG a CSS. Pega el SVG en el cuadro o suelta un archivo .svg en la zona de carga. Un icono corto es el tamaño adecuado. Una ilustración grande hincha la hoja de estilos.
2. Elige un preajuste en Preajustes de salida. Imagen de fondo básica es el punto de partida útil: una sola declaración background-image. Envoltorio URL da solo url('...') si el resto de la regla ya lo tienes. Imagen de fondo avanzada añade repetición, posición y tamaño.

   

3. La página muestra dos vistas: el icono como fondo CSS y el SVG original al lado. Debajo, Código CSS generado guarda la regla. Copiar CSS la deja en el portapapeles. Descargar .css guarda un archivo.

   

4. Pega la regla en el elemento que debe mostrar el icono. Dale a ese elemento un ancho y un alto; si no, la imagen de fondo no tiene dónde dibujarse.

Qué cambia el convertidor

La herramienta quita la declaración XML y los comentarios, junta los espacios de más y codifica el marcado para la URL. El resultado empieza por data:image/svg+xml;charset=utf-8,. El SVG sigue siendo texto dentro de la dirección, no un mapa de bits aparte.

Imagen de fondo avanzada sirve cuando el icono debe ir en una esquina. La posición horizontal y la vertical aceptan left, center o right y top, center o bottom, más un desplazamiento. Un desplazamiento negativo desde el borde derecho se vuelve una posición calc(100% - …). El tamaño del fondo acepta contain, cover o una longitud.

Consejos

• Mantén el SVG pequeño. Un data URI viaja con cada hoja de estilos que lo incluye. Los iconos de unas pocas líneas encajan.
• El tamaño de la caja va en tu propio CSS. La línea generada no pone width ni height.
• Empieza por el preajuste básico. Las propiedades de fondo extra se añaden después, y la vista previa se actualiza al cambiarlas.
• Mira la vista previa original. Si el SVG no es válido, ese panel muestra un error en lugar del dibujo.
• El marcado se queda en el navegador. Pegar un logo aquí no lo envía a ningún sitio.

Preguntas frecuentes

¿Esto exporta un PNG?

No. El SVG sigue siendo un vector dentro de un URI data:image/svg+xml. Para un mapa de bits hace falta un convertidor de imágenes.

¿Por qué preajuste empiezo?

Por Imagen de fondo básica, si quieres un fondo CSS. Por Envoltorio URL, si solo necesitas el valor url(...). Viñetas CSS escribe una regla list-style-image. Dentro de una clase envuelve el fondo en .svg-icon.

¿Se sube el SVG?

No. La codificación ocurre en el navegador.

¿Puedo colocar el icono?

Sí. Elige Imagen de fondo avanzada, fija la posición horizontal y la vertical y añade un desplazamiento. La vista previa y la regla generada se actualizan juntas.

Herramientas relacionadas

• SVG a CSS: la herramienta de esta guía.
• Generador de favicon: convierte una imagen en un juego completo de iconos.
• Convertidor de unidades CSS: convierte los px del diseño de alrededor.
• Herramientas web: el resto de la categoría.

Pruébalo

Abre el convertidor de SVG a CSS, pega un icono y copia la regla de fondo.