Hedef için <svg> öğesi genişletmek için boyutu üst kapsayıcı, bu durumda bir <div> olursa olsun, ne kadar büyük veya küçük kap olabilir.

Kod:

<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>

Bu sorunun en yaygın çözüm&; svg> öğesi lt viewBox öznitelik ayarı gibi görünüyor.

viewBox="0 0 widthOfContainer heightOfContainer"

Ancak, bu&; svg> öğesi lt unsurlar genişlikleri ve/veya Yükseklikleri önceden tanımlanmış durumlarda işe görünmüyor. Örneğin,&; rect> öğesi, yukarıdaki kodu lt, genişliği ve yüksekliği açıkça belirledi.

Bariz çözüm bu öğeler üzerinde % genişlikleri ve % heights kullanabilirsiniz. Ama bu bile yapılmak zorunda mı? Özellikle, yana <ımg src=test./> svg; çalışır ve herhangi bir sorun olmadan açıkça ayarlanmış </sözleşmeler genişletir iyi;rect> yükseklik ve genişlikleri.

Eğer elemanları gibi <rect> ve diğer unsurları gibi, sahip genişlikleri ve Yükseklikleri tanımlanmış yüzdeleri, orada bir şekilde Inkscape için ayarlanmış, böylece tüm unsurları ile <svg> belge kullanımı yüzde genişlikleri, Yükseklikleri, vb. yerine sabit Boyutlar?

viewBox kabın yüksekliği değil, çizim boyutu. Genişliği 100 birim, 10 birim olmak ** 6 tanımladıktan sonra ** 5 tanımlayın. Size SVG ölçekli ancak ondan sonra, rect 10% resmin genişliği olacak.