Boyutu, yerel olmayan olduğunda satır içi svg bir elemanın içeriğini ölçekli yapmak istiyorum. Tabii ki ayrı bir dosya olarak var ve bu şekilde çekebiliriz.

index.html: <img src="foo.svg" style="width: 100%;" />

foo.svg: <svg width="123" height="456"></svg>

Ancak, SVG sokmak için ek CSS stilleri eklemek istiyorum, bir tane harici bağlantı bir seçenek değil. Nasıl ınline SVG bir ölçek yapabilirim?

Belirttiğiniz koordinatlar içinde SVG görüntü bağımsız olarak ölçekli boyutu görüntü kullanın viewBox özniteliğinde SVG elemanı tanımlamak için ne sınırlama kutusunu görüntü içinde koordinat sistemi görüntü ve kullanım width height öznitelikleri tanımlamak ne genişliği ya da yüksekliği ile ilgili içeren sayfa.

Eğer varsa örneğin,:

<svg>
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

20 piksel Üçgen ile bir 10px olarak render eder

Eğer sadece genişliği ve yüksekliği ayarlayın, SVG öğenin boyutunu değiştirmek, ama Üçgen değil ölçek:

<svg width=100 height=50>
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

Eğer siz bir görünüm kutusu, bu neden bu dönüşüm görüntü gibi belirli kutusu (koordinat sistemi resim) ölçekli kadar uyum içinde verilen genişlik ve yükseklik (koordinat sistemi sayfası). Örneğin, ölçekte üçgeni tarafından 50px 100px olmak için:

<svg width=100 height=50 viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

Eğer HTML görüntüleme çerçevesinin genişliğini arttırmak istiyorsanız:

<svg width="100%" viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

Varsayılan olarak, en boy oranı korunur unutmayın. Eğer öyleyse, belirttiğiniz unsuru olmalı genişliği 100%, ama yükseklik 50px, olur aslında sadece büyütmek için yüksekliği 50px (sürece çok dar pencere):

<svg width="100%" height="50px" viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

Eğer gerçekten yatay olarak uzatmak istiyorsanız, preserveAspectRatio=none ile korunması: En-Boy oranı devre dışı bırakın

<svg width="100%" height="50px" viewBox="0 0 20 10" preserveAspectRatio="none">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

(Not Bu arada benim örnekler kullanıyorum sözdizimi bu işler için HTML gömme, dahil etmek için örnek bir görüntü StackOverflow ben yerine yerleştirmesi içinde başka bir SVG, çok ihtiyacım var kullanın geçerli XML sözdizimi)