svgdesk blog

Practical guides on SVG graphics: editing, conversion and optimization.

What is an SVG file?

Benefits, uses and why vector graphics are worth using on the web.

How to edit an SVG online

Step-by-step guide to open, modify and save an SVG with nothing to install.

Convert SVG to PNG

How to export a vector to a high-resolution PNG image without losing quality.

Edit nodes and bezier curves

Manipulate anchors, handles and curves to give your strokes an exact shape.

Optimize SVG code

Reduce the weight and clean up the code of your SVG files.

SVG vs PNG

Differences, advantages and when each format is best.

Insert an SVG in HTML

The 4 ways (inline, img, object and CSS background) and when to use them.

Animate an SVG with CSS

Rotation, drawn stroke, hover and keyframes with examples.

Make a logo in SVG

Create a vector logo step by step and export it to SVG and PNG.

Open an SVG file

How to open it in the browser, Windows, Mac and mobile.

Create an SVG favicon

A sharp tab icon with a single vector file.

What is the viewBox

The coordinate system that controls scale and cropping.

Path (d) commands

M, L, C, Q, A, Z and the rest, explained with examples.

Gradients in SVG

linearGradient and radialGradient with ready-to-use code.

Text in SVG

text, tspan, text on a curve and converting to outlines.

Responsive SVG

Make it adapt to any screen without deforming.

SVG sprites

Group icons with symbol and use to reuse them.

Clip with clipPath and mask

Fit images into shapes and create fades.