HTML에서 SVG 크기 조정?

160

그래서, 저는 HTML로 된 SVG 파일을 가지고 있는데, 제가 그 형식에 대해 들었던 것 중 하나는 확대 할 때 픽셀 화되지 않는다는 것입니다.

jpeg 또는 50x50 아이콘으로 저장할 수있는 모든 것을 알고 image_src에서 높이와 너비를 수동으로 설정하여 실제로 100x100 축소판 (또는 10x10)으로 표시합니다. 꼬리표.

그러나 SVG 파일은 object / embed 태그와 함께 사용되는 것으로 보이며 THOSE의 높이 또는 너비를 변경하면 사진에 더 많은 공간이 할당됩니다.

SVG 이미지가 실제로 파일 시스템에 저장된 것보다 작거나 크게 표시되도록 지정할 수있는 방법이 있습니까?

html  svg 
— 제니
소스

답변:

187

.svg텍스트 편집기 (단지 XML)로 파일을 열고 상단에서 다음과 같은 내용을 찾습니다.

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

너비 및 높이 속성을 지 웁니다. 기본값은 100 %이므로 컨테이너가 허용하는 범위까지 확장되어야합니다.

— 아마 단
소스
76
예, 맞습니다.하지만 'viewBox'속성 (예 : 50x50px 예제에서 viewBox = "0 0 50 50")도 추가해야합니다. 그렇지 않으면 콘텐츠가 제대로 확장되지 않을 수 있습니다 (컨테이너 크기에 따라 다름). Scour는이 작업을 자동으로 수행합니다 ( codedread.com/scour) .
— Erik Dahlström
만세! 도움이되었습니다! 나는 이미 파일에 100 %가있는 것으로 밝혀졌지만보기 상자가 핵심이었습니다! 둘 다 감사합니다!
— Jenny
27
다른 사람에게 명확하지 않은 경우 'viewBox'는 대소 문자를 구분합니다. 또한 이미지를 자르는 경우 처음 두 좌표는 왼쪽 위 모서리이고 두 번째 두 좌표는 크기 조정 전의 너비와 높이 입니다.
— Big McLargeHuge
1
<div style = "width : 50px; height : 50px"> <svg viewBox = "0 0 1000 1000"> ... </ svg> </ div> 및 <svg viewBox = "0 0 1000 1000" style = "width : 50px; height : 50px"> ... </ svg>가 작동합니다.
— widged
48

다음을 시도하십시오.

  1. 내용물 누락 뷰 박스 SVG 태그에 설정된 높이와 높이 속성의 높이와 폭 값을 채운다

  2. 그런 다음 높이와 너비 를 원하는 백분율 값 으로 설정 하여 그림의 크기를 조정하십시오 . 행운을 빕니다.

  3. 고정 된 종횡비 preserveAspectRatio="X200Y200 meet(예 : 200px)를 설정하지만 필요하지 않습니다.

예 :

 <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">
— 로렌츠로 사우어
소스
24

이미지 태그 및 크기 이미지 태그에 svg를 표시하여 크기를 조정할 수 있습니다.

<img width="200px" src="lion.svg"></img>
— Tanveer
소스
1
<img>를 사용할 때 내가 생각하는 문제는 <object> 태그의 장애 조치 기능이 손실된다는 것입니다 (버전 8 이하의 IE 사용자와 관련이있을 수 있음).
— Nathan Crause 2012 년
12

내 SVG에 viewBox및 preserveAspectRatio속성을 추가하는 것이 가장 좋습니다 . 뷰 박스는 SVG의 전체 너비와 높이를 다음 형식으로 설명해야합니다 0 0 w h.

<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 700 550"></svg>
— 두 하임
소스
2
이것은 정직하게 최선의 선택입니다. 매력처럼 작동합니다.
— Justin
이 작업 을 추가 width="100%"하고 height="100%"완벽하게 작동했습니다.
— n8jadams
10

컨테이너의 너비를 변경하면 소스 파일의 너비와 높이가 변경되지 않고 수정됩니다. 

.SvgImage img{ width:80%; }

이것은 SVG 크기 조정 문제를 해결합니다. 당신은 당신의 요구 사항에 따라 모든 %를 줄 수 있습니다.

— neuro_tarun
소스
8

다음 코드를 사용하십시오.

<g transform="scale(0.1)">
...
</g>
— 크리스 P
소스
4

다음은 https://gist.github.com/john-doherty/2ad94360771902b16f459f590b833d44를 사용하여 경계를 가져 오는 예입니다 svg.getBox().

결국에는 svg에 연결하여 뷰 박스를 적절하게 설정할 수있는 숫자를 얻게됩니다. 그런 다음 부모 div에서 CSS를 사용하면 완료됩니다.

 // 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);
— 로렌스 화이트 사이드
소스
1

HTML [....]에 SVG 파일이 있습니다. SVG 이미지가 실제로 파일 시스템에 저장된 것보다 작거나 크게 표시되도록 지정할 수있는 방법이 있습니까?

다른 창작물과 마찬가지로 SVG 그래픽은 대부분의 국가에서 저작권법에 따라 보호됩니다. 관할권, 저작물의 라이센스 또는 귀하가 저작권 소유자인지 여부에 따라 저작권법을 위반 하지 않고 SVG를 수정하지 못할 수도 있습니다 .

그러나 법률은 까다로운 주제이며 때로는 그냥 끝내고 싶을 때도 있습니다. 따라서 HTML 내에서 속성이 있는 태그를 사용하여 작업 자체를 수정하지 않고 그래픽 의 배율 을 조정할 수 있습니다 .imgwidth

외부 HTTP 요청을 사용하여 크기 지정 :

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

데이터 URI를 사용하여 마크 업에 크기 지정 :

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

SVG는 데이터 URI 에 맞게 최적화 되어 모든 크기에 적합한 SVG Favicon 이미지 를 만들 수 있습니다 .

<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">
— 조쉬 합 다스
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.