Blog de svgdesk

Guias practicas sobre graficos SVG: edicion, conversion y optimizacion.

¿Que es un archivo SVG?

Ventajas, usos y por que conviene usar graficos vectoriales en la web.

Como editar un SVG online

Guia paso a paso para abrir, modificar y guardar un SVG sin instalar nada.

Convertir SVG a PNG

Como exportar un vector a imagen PNG en alta resolucion y sin perder calidad.

Editar nodos y curvas bezier

Manipula anclas, asas y curvas para dar forma exacta a tus trazos.

Optimizar el codigo SVG

Reduce el peso y limpia el codigo de tus archivos SVG.

SVG vs PNG

Diferencias, ventajas y cuando conviene cada formato.

Insertar un SVG en HTML

Las 4 formas (inline, img, object y fondo CSS) y cuando usarlas.

Animar un SVG con CSS

Rotacion, trazo dibujado, hover y keyframes con ejemplos.

Hacer un logo en SVG

Crea un logo vectorial paso a paso y exportalo a SVG y PNG.

Abrir un archivo SVG

Como abrirlo en navegador, Windows, Mac y movil.

Crear un favicon SVG

Icono de pestaña nitido con un solo archivo vectorial.

Que es el viewBox

El sistema de coordenadas que controla escala y recorte.

Comandos del path (d)

M, L, C, Q, A, Z y demas, explicados con ejemplos.

Degradados en SVG

linearGradient y radialGradient con codigo listo.

Texto en SVG

text, tspan, texto en curva y convertir a trazos.

SVG responsive

Que se adapte a cualquier pantalla sin deformarse.

SVG sprites

Agrupa iconos con symbol y use para reutilizarlos.

Recortar con clipPath y mask

Encaja imagenes en formas y crea desvanecidos.