svg 인쇄 (CorelDraw의 경우 mm) 및 실제/미리보기 (px) 크기를 설정하는 방법은 무엇입니까?

Question

나는 (내가 코렐 드로우로를 열면 이렇게 문서 크기이 될 것입니다.) 수정의 50mm X 25mm의 인쇄 크기가 기본 SVG 파일을 가지고

<svg 
    width=50mm 
    height=25mm 
    xmlns="http://www.w3.org/2000/svg" 
    version="1.1" 
> 
    <g> 
     <text 
      x=0 
      y=55 
      font-family="Verdana" 
      font-size=55 
      fill="black" 
     >NOS?</text> 
     <line 
      class='v_pos' 
      stroke="green" 
      x1=0 
      y1=55 
      x2=500 
      y2=55 
      stroke-width="1" 
     /> 
    </g> 
</svg> 

을 어떻게가에서 500x250으로 픽셀 크기를 얻을 수 있습니다 브라우저? 비율은 변하지 않지만 웹 브라우저에도 고정 된 캔버스 크기가 필요합니다.

내가 문제 확장/바꾸어 말하다 필요가 SVG 파일을 읽을 수있는, 내가 코렐 드로우로 (브라우저에서 만든) 그래픽을 수출하고 싶습니다

합니다. 브라우저의 캔버스는 예를 들어 500x250 픽셀이며 모든 개체가 픽셀 단위로 먼저 측정됩니다.

• 마녀 속성이 캔버스 폭에 대한 책임 :

  

  그래서 질문은 다음과 같습니다 수출 모든 것이 거주해야 후, 는 객체 다음 (50x25mm로) 캔버스에서 시작 CorelDraw의 높이
• 개체를 포함하는 크기 조정의 빠른 방법 (preserveAspectRatio, viewBox, 스타일 미디어)이 있습니까? 아니면 모든 개체의 너비, 높이, x, y 등의 특성을 하나씩 변환해야합니까?

어떤 조언을 해주셔서 감사합니다!

Answer 1

는 SVG 이미지의 두 개의 서로 다른 크기 측면이있다. 첫번째는의 왼쪽 위 좌표를 X, Y 및 포함 된 viewBox, 및 폭 및높이에 의해 규정된다. 두 번째 것은 width 및 height 속성 또는 스타일 속성을 사용하여 정의됩니다.이미지를 원하기 때문에, 그런 viewBox="0 0 500 250"

:

그래서, 당신은 당신이 브라우저에 표시되는 내용이기 때문에 당신의 (0px, 0px) 및 (500px, 250px) 사각형 내부의 지역에 관심이 있다고하는 viewBox 속성을 사용 50mm 너비 및 25mm 높이로 표시되도록 너비와 높이를 적절하게 설정합니다. 이를 루트 svg 요소의 속성으로 설정하거나 브라우저에서 적용하기 때문에 내보내기 할 때만 설정해야합니다. 또는 style 요소 만 사용하여 설정할 수 있습니다. print 미디어.

브라우저의 경우 viewBox을 정의하는 경우 기본적으로 viewBox에 정의 된 영역이 픽셀 당 픽셀로 표시되므로 너비와 높이를 명시 적으로 지정할 필요가 없습니다.

Answer 2

다른 미디어을 다룰 때는 스타일 시트 미디어 선택자을 사용하십시오. 그리고 SVG는 기본적으로 <style> 요소의 media attribute을 사용하여이를 지원합니다. 기본 구문은 다음과 같습니다 수행하려는 작업에 따라 이제

<style media="something" type="text/css"> 
    svg:root { 
    width: 50mm; 
    height: 25mm; 
    } 
</style> 

, 당신은 할 수 있습니다

1. 사용 media="print"는 인쇄 용지의 크기를 지정에 지정된 기본 폭과 높이를시키기 위해 표시 할 화면를 사용하는 경우 루트 <svg> 요소에 설정된 속성은 브라우저의 대상 폭과 높이를 지정하는 다른 모든 경우
2. 사용 media="screen"에 사용되는 경우 화면은 defined이며 "주로 컬러 컴퓨터 화면 용"입니다. 당신이 무한 캔버스에서보고 싶지 않을 정도 및 결과 이미지는 얼마나 큰이어야한다 :