SVG에 크기 개념이 있습니까?


11

SVG 파일이 궁금합니다. XML의 경로 태그로 정의 된 벡터 모음이므로 svg 태그에 너비와 높이가 픽셀로 표시되는 이유는 무엇이며 치수를 제거하면 어떻게됩니까?

답변:


15

너비와 높이는 viewBox설정된 경우에만 관련 이 있습니다. 이 속성이 없으면 너비와 높이를 안전하게 삭제할 수 있습니다. 항상 그려진 눈금으로 표시됩니다. <rect>너비가 10px (높이) 20px (높이)로 설정되어 있으면 viewBox가 설정되어 있지 않을 때 너비 또는 높이가 있거나없는 10x20 크기로 표시됩니다.

경우 viewBox속성이 설정되어있는 경우 위 또는 아래로 원래의 스케일을 조정 폭과 높이를 사용할 수 있습니다.

너비와 높이는 없지만 viewBox를 설정하지 않으면 svg를 무한대로 확장 할 수 있으며, 이는 원하는 동작 일 수도 있고 아닐 수도 있습니다. 반응 형 HTML 페이지에서 이것은 종종 바람직합니다. 경계 컨테이너에 맞게 확장 또는 축소됩니다.

이것들은 같습니다

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

원래 배율이 두 배가됩니다.

<svg viewBox="0 0 120 120" width="240" height="240" 
xmlns="http://www.w3.org/2000/svg">

이것은 무한한 스케일링을 허용합니다

<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.