크기 조정시 svg가 래스터 화되어 blury 결과가 발생합니다.

<svg> 태그 내에 외부 SVG 이미지 파일을 포함시키고 싶습니다. 다음과 같이 내가 SVG의 <image> 태그를 사용하고,이 작업을 수행하려면, 당신이 볼 수 있듯이, 나는 transform 속성을 추가하여 5.0 중첩 된 SVG를 확장하기 위해 노력하고있어크기 조정시 svg가 래스터 화되어 blury 결과가 발생합니다.

<svg width="1000" height="1000" 
xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink"> 

    <image x="0" y="0" width="48" height="48" 
    xlink:href="http://static.micahcarrick.com/media/images/autotools-tutorial/hello-world.svg" 
    transform="scale(5.0)" /> 

</svg>

. 불행히도 파이어 폭스와 크롬 모두에서 스케일링하기 전에 중첩 된 SVG를 래스터 화하기 때문에 때때로 블레어 이미지가 나타납니다.

참고 : Firefox와 Chrome에서 예상되는대로 작동합니다 (예 : Chrome에서 JSFiddle을 열면 blury/broken이 발생합니다.) F5 키를 누르면 파삭 파삭 한/작동)

크기 조정 전에 중첩 된 SVG가 래스터 화되지 않도록 보장 할 방법이 있습니까?

감사합니다 :)

JSFiddle : http://jsfiddle.net/a9NRY/17/

ugly rasterization perfect