resizeable html svg image

Question

http 요청을 줄이고 css3 stuff 대신 svg로 재생하려고하는 약간의 실험에 재미가 있습니다 ...이 HTML SVG를 동적으로 확장하도록 설정할 수 없습니다. 이상적으로, 너비와 높이를 50 %로 설정하고 창 크기를 조정하면서 브라우저가 나머지 작업을하도록하고 싶습니다. 여기

코드입니다 :

<svg xmlns="http://www.w3.org/2000/svg"> 
    <title>Daniel Hutchinson</title> 
    <g> 
    <path d="m133.936,182.53101h-8.41701v77.21298h8.05002c21.40799,0 39.70398,-11.70999 39.70398,-38.60599c0.00101,-24.70099 -16.28299,-38.60699 -39.33699,-38.60699z" clip-rule="evenodd" fill-rule="evenodd"/> 
    <path fill="black" d="m218.448,0c-120.646,0 -218.448,97.802 -218.448,218.448s97.802,218.448 218.448,218.448s218.448,-97.802 218.448,-218.448s-97.80301,-218.448 -218.448,-218.448zm-77.925,290.117h-50.86501v-137.95801h50.86501c38.423,0 70.07701,30.19 70.07701,68.97897s-31.83701,68.97903 -70.07701,68.97903zm210.22499,0h-35.862v-56.53699h-51.78v56.53699h-35.862v-137.95801h35.862v53.24402h51.78v-53.24402h35.862v137.95801l0,0z" clip-rule="evenodd" fill-rule="evenodd"/> 
    </g> 
</svg> 

Answer 1

브라우저는 당신이 그 (것)들에게 viewBox를 제공하지 않는 한 제대로 SVG 이미지의 크기를 조절하지 않습니다, 나는 빨리 experimenting in JSFiddle 이러한 수치에 도착, 당신은 아마에 필요한 정확한 알엇를 해결할 수 약간의 노력이 :

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 600 600"> 

또한 width 및 height 속성을 지정 시도 할 수 있습니다, 다른 브라우저는 다음을 크기를 특히, 다른 방법으로 그들에게 응답 CSS로. 얼마 지나지 않아 나는 a test page which tried all the combinations when embedding SVG as an image을 두들겨봤을 때 파이어 폭스와 크롬 등 다른 결과를 비교해 볼 가치가있다. CSS에서 SVG를 사용하면 비슷한 결과를 얻을 것으로 기대됩니다.