Como hacer un SVG responsive
Que se adapte a cualquier pantalla
Un SVG responsive se ajusta al ancho de su contenedor sin deformarse. La clave es el viewBox y evitar tamaños fijos.
1. Usa viewBox, no width/height fijos
Define el sistema interno con viewBox y deja que el CSS controle el tamaño en pantalla:
<svg viewBox="0 0 100 100"> ... </svg>
2. Controla el tamaño con CSS
svg { width: 100%; height: auto; display: block; }
Asi el SVG ocupa el ancho del contenedor y la altura se ajusta sola, manteniendo proporcion.
3. preserveAspectRatio
Por defecto (xMidYMid meet) el dibujo cabe completo y centrado. Si quieres que llene el area recortando, usa slice. Evita none salvo que quieras deformar a proposito.
Error comun
Dejar width="300" height="200" en el tag fuerza un tamaño y rompe la adaptacion. Quita esos atributos si vas a controlarlo con CSS.
Inline vs img
Tanto inline como con <img> el SVG puede ser responsive. Inline ademas te deja estilarlo con CSS.
Listo para web
En svgdesk, los SVG se crean con viewBox y sin tamaños fijos al exportar, asi quedan listos para ser responsive.