HTML'de SVG yeniden boyutlandırılıyor mu?

Yani, HTML'de bir SVG dosyam var ve format hakkında duyduğum şeylerden biri, yakınlaştırdığınızda tüm pikselli hale gelmemesidir.

Bir jpeg ile ya da 50 ila 50 simge olarak saklayabildiğim her şeyi biliyorum, sonra aslında image_src'de yüksekliği ve genişliği manuel olarak ayarlayarak (oldukça pikselli) 100 x 100 küçük resim (veya 10 x 10) olarak görüntüleyin etiket.

Ancak, SVG dosyaları nesne / katıştırılmış etiketlerle kullanılıyor gibi görünüyor ve THOSE yüksekliğini veya genişliğini değiştirmek sadece resim için daha fazla alan ayrılmasına neden oluyor.

Bir SVG görüntüsünün dosya sisteminde depolandığından daha küçük veya daha büyük görüntülenmesini istediğinizi belirtmenin bir yolu var mı?

Senin aç .svgüstündeki böyle bir şey için, ve göz (sadece XML var) bir metin editörü ile dosyayı:

<svg ... width="50px" height="50px"...

Genişlik ve yükseklik özelliklerini silme; varsayılanlar% 100'dür, bu nedenle kabın izin verdiği her şeye uzanmalıdır.

Bunları dene:

1. Eksik görünüm kutusunu ayarlayın ve svg etiketinde ayarlanan yükseklik ve yükseklik niteliklerinin yükseklik ve genişlik değerlerini girin

2. Sonra tarafından basitçe resmi ölçek yükseklik ve genişliğini ayarlayarak için istenen yüzde değerlerinin. İyi şanslar.

3. preserveAspectRatio="X200Y200 meet(Ör. 200 piksel) ile sabit bir en boy oranı ayarlayın , ancak gerekli değildir

Örneğin

 <svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="10%" 
   height="10%"
   preserveAspectRatio="x200Y200 meet"
   viewBox="0 0 350 350"
   id="svg2"
   version="1.1"
   inkscape:version="0.48.0 r9654"
   sodipodi:docname="namesvg.svg">

resim etiketi ve boyut resim etiketinde svg görüntüleyerek yeniden boyutlandırabilirsiniz.

<img width="200px" src="lion.svg"></img>

Kabın genişliğinin değiştirilmesi, kaynak dosyanın genişliğini ve yüksekliğini değiştirmek yerine onu da düzeltir.

.SvgImage img{ width:80%; }

Bu svg yeniden boyutlandırma sorunumu giderir. Gereksiniminize göre herhangi bir% verebilirsiniz.

SVG'lerime ekleme viewBoxve preserveAspectRatioözniteliklerimi eklemenin en iyisini buldum . Görünüm kutusu, SVG'nin tam genişliğini ve yüksekliğini şu biçimde açıklamalıdır 0 0 w h:

<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 700 550"></svg>

Aşağıdaki kodu kullanın:

<g transform="scale(0.1)">
...
</g>

Sınırları kullanarak bir örnek svg.getBox(): https://gist.github.com/john-doherty/2ad94360771902b16f459f590b833d44

Sonunda, görünüm kutusunu düzgün ayarlamak için svg'ye ekleyebileceğiniz numaralar alırsınız. Sonra üst div üzerinde herhangi bir css kullanın ve işiniz bitti.

 // get all SVG objects in the DOM
 var svgs = document.getElementsByTagName("svg");
 var svg = svgs[0],
    box = svg.getBBox(), // <- get the visual boundary required to view all children
    viewBox = [box.x, box.y, box.width, box.height].join(" ");

    // set viewable area based on value above
    svg.setAttribute("viewBox", viewBox);

Ben bir SVG dosyası HTML [....] Orada bir SVG görüntü aslında dosya sisteminde depolanan daha küçük veya daha büyük görüntülenmesini istediğinizi belirtmek için herhangi bir yolu var mı?

SVG grafikleri, diğer yaratıcı çalışmalar gibi, çoğu ülkede telif hakkı yasası kapsamında korunmaktadır. Yetki alanına, çalışmanın lisansına veya telif hakkı sahibi olup olmadığınıza bağlı olarak, SVG'yi telif hakkı yasasını ihlal etmeden değiştiremeyebilirsiniz , ister inanın ister inanmayın.

Ancak yasalar zor konulardır ve bazen sadece bok yapmak istersiniz. Bu nedenle , HTML'nizdeki özniteliğe sahip etiketi kullanarak çalışmanın kendisini değiştirmeden grafiğin ölçeğini ayarlayabilirsiniz .imgwidth

Boyutu belirtmek için harici bir HTTP isteği kullanma:

<img width="96" src="/path/to/image.svg">

Veri URI'sini kullanarak biçimlendirmedeki boyutu belirtme :

<img width="96" src="data:image/svg+xml,...">

SVG'ler, her boyuta uygun SVG Favicon görüntüleri oluşturmak için Veri URI'leri için optimize edilebilir :

<link rel="icon" sizes="any" href="data:image/svg+xml,%3Csvg%20viewBox='0%200%2046%2045'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EAfter%20Dark%3C/title%3E%3Cpath%20d='M.708%2045L23%20.416%2045.292%2045H.708zM35%2038L23%2019%2011%2038h24z'%20fill='%23000'/%3E%3C/svg%3E">