SVG 및 viewBox 값


14

누군가가 viewBox값 (즉 viewBox="a b c d")이 어떻게 결정 되는지 알고 있다면 궁금합니다 .

나는 그래서는 잉크 스케이프에서 문서 작성 무슨 짓을했는지, 잉크 스케이프의 SVG의 기능을 이해하기 위해 노력하고있어 100pxX를 100px(즉, 뷰포트의 왼쪽에서 선을 그려, 0(즉 오른쪽으로 수평 값) 100수평 값) .

그러나 이상하게 도이 문서를 일반 SVG 파일로 저장 한 다음 텍스트 편집기에서 파일을 열면 viewBox값이 viewBox="0 0 26.458333 26.458334"대신 설정됩니다 viewBox="0 0 100 100".

이 값 ( 0 0 26.458333 26.458334)이 어떻게 결정되는지, 왜 값 과 뷰포트 치수 사이에 관계가 없는지 아는 사람이 있습니까?

추신 : 나는 viewBox문서 옵션에서 수동으로 속성을 편집 할 수 있다는 것을 알고 있지만 Inkscape가 펑키 값으로 설정하는 이유에 대해 여전히 궁금합니다.

답변:


19

Inkscape는 mm를 문서의 기본 표시 단위 또는 사용자 단위 로 사용합니다. 사용자 단위 는 SVG 파일에 값을 저장하는 데 사용됩니다.

<svg width="100" height="100" viewBox="0 0 26.458333 26.458333">

이 태그는의 도면 크기를 설명합니다 100px x 100px. 뷰 박스 속성을 정의 100px x 100px하는 것과 같습니다 26.458333 x 26.458333 user units.

SVG 축척 비율은 1px / 0.2645 user-unitSVG 렌더러에서 사용자 단위 로 저장된 모든 값을 실제 도면 크기 로 변환하는 데 사용할 수 있습니다 .


이 경우 Inkscape는에 값을 저장하려고 mm하므로 px관련 방법을 알아야합니다 mm. CSS 규격은 절대 길이 단위는 서로에 대해 고정 된 것으로 설명96px = 1in

이것은 의미 100px = 1.041666667in = 2.645833333cm = 26.45833333mm

그래서 그것이 시작되는 곳 26.45833333입니다.


Inkscape가에 모든 값을 저장 하도록 하려면 문서 속성 (파일> 문서 속성> 탭 : 페이지> 일반> 표시 단위) px에서 기본 표시 단위 또는 사용자 단위를 변경할 수 있습니다.px

  1. 기본, mm :

문서 속성 mm

  1. 변경 : px :

문서 속성 px

동일한 문서를 내 보내면 다음 SVG 태그가 생성됩니다.

<svg width="100" height="100" viewBox="0 0 100 100">

이제 SVG 스케일 팩터는 1px / 1 user-unit입니다.

이 주제에 대해 더 알고 싶다면 Inkscape Wiki 에 더 자세한 설명이 있습니다.

비고 :

  • 잉크 스케이프 v0.92의 관계는 사용하는 96px/in잉크 스케이프 v0.91을 이전 값을 사용90px/in

와. 매우 흥미로운. 그래서 운율과 이유가 있었다. 지식을 공유해 주셔서 감사합니다!
— oldboy

나는 당신이 사용한 화이트 아웃 기술을 기억할 것입니다. 나는 일반적으로 스크린 샷의 중요한 부분 주위에 빨간색 사각형을 넣어, 당신은 너무 훨씬 좋네요.
— aaaaaa
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.