☰

x2 속성이 없을 때 소프트웨어마다 다르게 표시되는 SVG 선형 그래디언트

tag-icon • tag-icon browser inkscape svg standards
x2 속성이 없을 때 소프트웨어마다 다르게 표시되는 SVG 선형 그래디언트

최근에 파일을 가져와서 편집했습니다.잉크스케이프. Inkscape에서 이미지를 "최적화된 SVG"로 저장했지만 결과 파일을 다른 프로그램에서 열었을 때 일부는 Inkscape와 동일하게 표시되는 반면 다른 일부는 특정 선형 그라디언트를 적용하지 않았습니다(그러나 이미지의 다른 모든 부분은 그라디언트를 포함하여 잘 작동했습니다).

지금까지는 뒷이야기였습니다. 원본 이미지를 최소한의 예로 압축하고 SVG 소스의 어느 부분이 다른 뷰어를 다르게 동작하게 만드는지 결정했습니다. 이것은 내 예제 SVG 파일입니다.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" height="982" width="982" version="1.1"
 viewBox="0 0 982 982">
 <defs>
  <linearGradient id="a" gradientUnits="userSpaceOnUse"
   gradientTransform="matrix(-62.075 1070.8 1070.8 62.075 521.8 -42.09)">
   <stop stop-color="#bbb9c2" offset="0"/>
   <stop stop-color="#3f3" offset="1"/>
  </linearGradient>
 </defs>
 <path fill="url(#a)" d="m0 491.11c0 271.12 219.78 490.89 490.85 490.89 271.13 0 490.92-219.77 490.92-490.89 0-271.07-219.79-490.86-490.92-490.86-271.07 0-490.85 219.79-490.85 490.86"/>
</svg>

이것은 Inkscape에서 보이는 것과 같습니다.그놈 이미지 뷰어(“Eye of GNOME”): Inkscape 또는 Eye of GNOME의 SVG 이미지 예

Firefox 및 Chromium 웹 브라우저에서는 다음과 같이 표시됩니다. Firefox 또는 Chromium의 SVG 이미지 예

그러나 나는 그것을 알아차렸다.x2="1"요소 에 속성을 추가하면 <linearGradient>모든 뷰어에서 이미지가 동일하게 보입니다..

안타깝게도 저는 SVG 파일 형식과SVG 표준, 하지만 내가 보기엔 분명한 것 같아내 파일에 대한 해석 중 하나가 잘못된 것 같습니다(즉, 표준을 위반함).. 어느 쪽이 옳은지 아는 사람이 있나요(예: 어떤 프로그램에 대해 버그 보고서를 제출해야 하는지)?

답변1

좋아, 아직 두 가지 표현 중 어느 것이 올바른지 완전히 확신할 수는 없지만 Inkscape와 Eye of GNOME 모두에서 내 예제의 동작에 영향을 미치는 버그를 발견했기 때문에 이것이 웹 브라우저에 표시되는 표현인 것으로 의심됩니다. 아래에).

나가지다처음에 이 문제를 알게 된 이유를 알아냈습니다. Inkscape로 연 SVG 파일에는 (내 예에서와 마찬가지로) <linearGradient>속성이 gradientUnits="userSpaceOnUse"있습니다 . "최적화된 SVG"로 저장할 때 Inkscape는 이를 속성 의 기본값인 와 동등한 것으로 해석했기 때문에 속성 x2="1"을 "최적화했습니다".x2="1"x2="100%"x2SVG 표준에 지정된 대로따라서 생략될 수 있습니다.하지만, Inkscape의 x2="100%"⇔ 해석은 x2="1"(아마도) 부정확합니다.잉크스케이프 버그 #1153706.

이 문제에 대한 연구에서 저는 다양한 소프트웨어가 그라디언트 벡터 속성 , 및 와 gradientUnits="userSpaceOnUse"함께 어떻게 처리하는지에 대한 다양한 불일치를 발견했습니다 . 다음은 이미 존재했거나 발견 결과에 따라 직접 제출한 버그 보고서입니다.x1x2y1y2

관련 정보