ImageMagick이이 SVG 이미지를 자르는 이유 ... U + 1F382 글리프 렌더링

Question

업데이트 SVG 이미지 자르기 문제가 ImageMagick으로 축소되었습니다. 즉, convert birthday_cake.svg birthday_cake.png은 특정 설치, 즉 우분투에서 잘린 birthday_cake.png을 생성합니다. 나는 현재 더 조사 중이다.

convert의 내 버전이 6.7.7-10와 나는 그래서 이 문제가 될 수있는 최신 버전 7.0.7-8에서 현재 참조하십시오.

원래 질문

내가 다음 SVG 파일을 다운로드 이맥스로로드하지만 아래 세 번째가 잘려지고 따릅니다. 또한, 오른쪽에서 약간의 양이 잘립니다. 그러나 파일은 이 아니며 Firefox 또는 Google 크롬에서이 잘리지 않습니다. 그건 그렇고,이 SVG는 U + 1F382 생일 케이크 유니 코드 글리프의 렌더링입니다.

는 내가 전에 어떤 SVG 또는 이미지 파일이 자르기를 발견 적이 없다. 그래서 나는 이맥스와이 특정 SVG 파일 사이에 이상한 상호 작용이 있다고 의심한다.

그래서 이것에 대해 무엇입니까 특히 이맥스 내에서 자르기를 트리거하는 SVG 파일은 무엇입니까? 더구나 이맥스에이 SVG 파일의 전체 높이와 너비를 표시하려면 어떻게해야합니까?

$ wget -q http://www.fileformat.info/info/unicode/char/1f382/birthday_cake.svg 
$ emacs-snapshot -Q birthday_cake.svg --geometry 60x24 -eval '(set-frame-name "BAD SVG")' 
$ emacs-snapshot --version | head -1 
GNU Emacs 25.1.50.2 
$ firefox birthday_cake.svg 

SVG 는는 imagemagick-types에 포함되어

<?xml version="1.0"?> 
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.0//EN' 'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'> 
<svg fill-opacity="1" xmlns:xlink="http://www.w3.org/1999/xlink" color-rendering="auto" 
    color-interpolation="auto" text-rendering="auto" stroke="black" stroke-linecap="square" 
    stroke-miterlimit="10" shape-rendering="auto" stroke-opacity="1" fill="black" stroke-dasharray="none" 
    font-weight="normal" stroke-width="1" xmlns="http://www.w3.org/2000/svg" font-family="&apos;Dialog&apos;" 
    font-style="normal" stroke-linejoin="miter" font-size="12" stroke-dashoffset="0" image-rendering="auto"> 
    <!--Unicode Character 'BIRTHDAY CAKE' (U+1F382)--> 
    <defs id="genericDefs" /> 
    <g><g> 
    <path d="M285.1875 252 Q285.1875 274.5 ... 118.5469 221.3438 Z" stroke="none" /> 
    </g></g></svg> 

이 중 일부는 다음과 같습니다

(member 'SVG (imagemagick-types)) 
(SVG SVGZ TEXT TGA THUMBNAIL TIFF TIFF64 TILE TIM TTC TTF TXT ...) 

이 게시물에 대한 짧아 12킬로바이트 경로와 SVG 파일의 축소 된 버전입니다 이 이미지 자르기에 기여하는 SVG 태그의 속성은 무엇입니까? 그렇다면 해당 요소를 항목별로 나누고 상호 작용을 설명하십시오.

Answer 1

멀티 파트 도구 체인을 통해 렌더링 된 이미지를 가져오고 있습니다. emacs는 ImageMagick을 사용하여 이미지를 렌더링하고 ImageMagick은 librsvg를 사용하여 벡터 이미지를 래스터 이미지로 변환합니다.

표시되는 오류의 렌더러에는 루트가 없지만 결함이있는 SVG 파일에 있습니다. width 또는 height 속성이나 viewBox 속성을 정의하지 않습니다. 따라서 이미지의 고유 너비 및 높이를 설정할 수 없습니다. librsvg는 포함 된 grafical 요소의 결합 된 경계 상자를 사용하여 일부 대체 값을 찾아서이 문제를 해결하려고합니다. 불행하게도, 그것은 오류로 그렇게합니다.

는

{ 
    x: 11.531200408935547, 
    y: 68.4843978881836, 
    width: 273.65631103515625, 
    height: 272.8125 
} 

librsvg 같이하는 한 같은 결과를 얻을 수있다 결과를 콘솔 브라우저에로드 및 자바 스크립트에

document.querySelector('svg').getBBox() 

을 실행할 수있는 내용에 대한 경계 상자를 찾으려면 출력 이미지는 273px × 272px이지만 상자의 왼쪽 상단 경계가 이미지 뷰포트의 왼쪽 상단 테두리와 일치하도록 내용이 변환되지 않으므로 오른쪽과 아래쪽에서 잘립니다.

나는 소스 웹 페이지, www.fileformat.info이 SVG를 렌더링하는 방법을 모르지만, 당신은 뷰 박스 속성

viewBox="-50 60 400 400"