HTML에서 SVG 크기를 조정 하시겠습니까?

HTML에서 SVG 크기를 조정 하시겠습니까?

---

따라서 HTML로 된 SVG 파일이 있는데, 내가 형식에 대해 들었던 것 중 하나는 확대 할 때 모든 픽셀 화되지 않는다는 것입니다.

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

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

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

---

.svg텍스트 편집기 (XML 일뿐)로 파일을 열고 맨 위에서 다음과 같은 것을 찾으십시오.

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

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

---

이것들을보십시오 :

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">

---

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

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

---

컨테이너의 너비를 변경하면 소스 파일의 너비와 높이를 변경하는 대신 컨테이너의 너비도 수정됩니다.

.SvgImage img{ width:80%; }

---

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

---

다음을 사용하여 범위를 얻는 예는 다음과 같습니다 svg.getBox(). https://gist.github.com/john-doherty/2ad94360771902b16f459f590b833d44

마지막으로 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);

---

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

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

---

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

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

---

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

SVG graphics, like other creative works, are protected under copyright law in most countries. Depending on jurisdiction, license of the work or whether or not you are the copyright holder you may not be able to modify the SVG without violating copyright law, believe it or not.

But laws are tricky topics and sometimes you just want to get shit done. Therefore you may adjust the scale of the graphic without modifying the work itself using the img tag with width attribute within your HTML.

Using an external HTTP request to specify the size:

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

Specifying size in markup using a Data URI:

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

SVGs can be Optimized for Data URIs to create SVG Favicon images suitable for any size:

<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">

참고URL : https://stackoverflow.com/questions/3120739/resizing-svg-in-html