¿Cómo hacer que un elemento <svg> se expanda o contraiga a su contenedor principal?

El objetivo es que el <svg>elemento se expanda al tamaño de su contenedor principal, en este caso a <div>, sin importar cuán grande o pequeño sea ese contenedor.

El código:

<style>
    svg, #container{
        height: 100%;
        width: 100%;
    }
</style>

<div id="container">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" >
         <rect x="0" y="0" width="100" height="100" />
    </svg>
</div>

La solución más común a este problema parece establecer el viewBoxatributo en el <svg>elemento.

viewBox="0 0 widthOfContainer heightOfContainer"

Sin embargo, esto no parece funcionar en los casos en que los elementos dentro del <svg>elemento tienen anchos y / o alturas predefinidos. Por ejemplo, el <rect>elemento, en el código anterior, tiene su ancho y alto establecidos explícitamente.

Entonces, la solución obvia es usar% anchuras y% alturas en esos elementos también. Pero, ¿es necesario hacer esto? Especialmente, dado que <img src=test.svg >funciona bien y se expande / contrae sin ningún problema con las <rect>alturas y anchos establecidos explícitamente .

Si los elementos como <rect>, y otros elementos similares, tienen que tener sus anchos y alturas definidos en porcentajes, ¿hay alguna forma en Inkscape de configurarlo para que todos los elementos del <svg>documento usen anchos, alturas, etc. porcentuales en lugar de dimensiones fijas? ?

No viewBoxes la altura del contenedor, es el tamaño de tu dibujo. Defina que su viewBoxancho sea de 100 unidades, luego defina rectque sea de 10 unidades. Después de eso, por grande que sea la escala del SVG, rectserá un 10% del ancho de la imagen.

Supongamos que tengo un SVG que se ve así:

Y quiero ponerlo en un div y hacer que llene el div en respuesta. Mi forma de hacerlo es la siguiente:

Primero abro el archivo SVG en una aplicación como inkscape. En Archivo-> Propiedades del documento, configuro el ancho del documento en 800px y el alto en 600px (puede elegir otros tamaños). Luego coloco el SVG en este documento.

Luego guardo este archivo como un nuevo archivo SVG y obtengo los datos de ruta de este archivo. Ahora, en HTML, el código que hace la magia es el siguiente:

<div id="containerId">    
    <svg
    id="svgId" 
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns="http://www.w3.org/2000/svg"
    version="1.1"
    x="0"
    y="0"
    width="100%"
    height="100%"
    viewBox="0 0 800 600"
    preserveAspectRatio="none">
       <path d="m0 0v600h800v-600h-75.07031l-431 597.9707-292.445315-223.99609 269.548825-373.97461h-271.0332z" fill="#f00"/>
    </svg>
</div>

Tenga en cuenta que el ancho y la altura de SVG están configurados al 100%, ya que queremos que llene el contenedor vertical y horizontalmente, pero el ancho y alto del viewBox son los mismos que el ancho y alto del documento en inkscape, que es 800px X 600px. Lo siguiente que debe hacer es establecer preserveAspectRatio en "none". Si necesita más información sobre este atributo, aquí tiene un buen enlace . Y eso es todo lo que hay que hacer.

Una cosa más es que este código funciona en casi todos los navegadores principales, incluso en los antiguos, pero en algunas versiones de Android e iOS es necesario utilizar un código javascrip / jQuery para mantener la coherencia. Utilizo lo siguiente en las funciones de preparación de documentos y cambio de tamaño:

$('#svgId').css({
    'width': $('#containerId').width() + 'px',
    'height': $('#containerId').height() + 'px'
});

¡Espero eso ayude!

Lo que me funcionó recientemente es eliminar todos los atributos height=""y width=""de la <svg>etiqueta y todas las etiquetas secundarias. Luego, puede usar la escala utilizando un porcentaje de la altura o el ancho del contenedor principal.

@robertc tiene razón, pero también debe notar que svg, #containerhace que el svg se escale exponencialmente para cualquier cosa menos 100% (una vez por #containery una vez por svg).

En otras palabras, si apliqué 50% h / w a ambos elementos, en realidad es el 50% del 50%, o .5 * .5, que equivale a .25, o 25% de escala.

Un selector funciona bien cuando se usa como sugiere @robertc.

svg {
  width:50%;
  height:50%;
}

Para tu iphone, puedes usar en tu cabeza:

"width=device-width"