SVG in Firefox

Firefox 2는 더욱 폭넓은 Scalable Vector Graphics (SVG) 기능 구현을 위해서 계속해서 향상시켜 나가고 있습니다. 많은 스펙과 버그 수정들이 포함되었지만 Firefox 1.5이후 새로이 추가된 유일한 특징이 바로 <textPath>입니다. -- 아래 참조.

Firefox SVG는 SVG 1.1의 부분집합이지만 그렇다고 공식 프로필(Tiny, Basic, Full)들중 어느 것도 아닙니다. 각 내용들과 그것들이 Firefox 2에서 구현되었는지 아닌지에 대한 전체 내용은 문서의 마지막에서 찾을 수 있습니다. 문서의 나머지 부분은 우리의 구현상 제약사항들에 대한 정보를 제공할 것입니다.

우리들의 구현의 특이한 점들이 컨텐츠를 개발함에 있어서 번거로울 수도 있다는 것을 알고 있습니다. 하지만 커다란 스펙의 완전한 구현이 될 때까지 여러분의 인내를 부탁드립니다.

이 문서를 읽을때 이들 구현들의 세부사항들이 언제 바뀔지 궁금해할지도 모릅니다. 불행히도 현재 로드맵에 따르면 Gecko의 다음 버전에 기반한 Firefox의 공식 출시일이 꽤 나중이 되겠지만 2007년 1/4분기라고 나와있습니다. 그러나 새로운 기능을 시험해보고 싶다면 현재 개발중인 nightly builds를 사용해볼 수 있습니다.

성능

Firefox가 출시하는 모든 플랫폼은 같은 렌더링 백엔드 cairo를 사용합니다. 그래서 이들 간에 성능에 관한 특징은 일반적으로 유사할 것입니다. Linux에서의 성능은 예측하기가 가장 힘든데 이는 다양한 X서버마다 RENDER 확장의 구현이 다양하기 때문입니다.

Windows에서 SVG 렌더링은 다른 플랫폼상에서 보다도 상당히 빠릅니다.

좌표 범위

당신의 컨텐츠가 상당히 넓은 범위의 좌표를 가지는 구조를 가지고 있다면 cairo가 내부적으로 계산할 때 수를 16.16비트의 고정 소수점 표현 방식을 사용하기 때문에 발생할 수 있는 문제점들에 대해서 주의 깊게 고려해야 합니다. Cairo는 rasterization하기 전에 primitives들에 대한 클리핑을 하지 않기 때문에 변환과정 후 최종적으로 -32678에서 32677의 범위를 벗어나는 좌표들에 대해서는 렌더링 오류나 아주 느린 성능을 보여주기도 합니다.

Windows 98에서의 Text

안타깝게도 윈도우즈에서 cairo를 렌더링 엔진으로 사용한다면 Windows 98에서 텍스트 렌더링이 되지않는 버그가 있다. 사실, 그것보다 더 심각한 문제가 있다 : SVG 컨텐츠를 렌더링하는 도중에 텍스트를 만나면 모든 그리기 기능이 정지되어버리는 것이다.

폰트 선택

CSS에 익숙하다면 특정 폰트에서 들어있지 않은 기호들의 경우 폰트 속성에서 예비 폰트들을 지정할수 있다는 것을 알고 있을 것입니다. 현재 SVG 렌더링 백엔드는 단지 지정된 첫번째 폰트를 사용하도록 시도하며 만약 그 폰트가 없다면 플랫폼의 폰트를 사용하게 됩니다. 예비 폰트는 사용되지 않습니다; 그래서 예를 들면 font-family="Arial,LucidaSansUnicode" 이 코드는 Arial 폰트를 사용할 수 없는 경우 LucidaSansUnicode가 사용되게끔 하는 것은 아닙니다.

인쇄

아쉽지만 현재 인쇄는 SVG의 벡터 속성을 이용해서 매우 선명하게 출력해내도록 하는 부분은 완료되지 않았습니다. 하지만 화면 해상도정도로 그려져서 그 이미지처럼 출력됩니다.

Windows상에서 출력했을 때 폰트의 크기는 SVG에서 지정된 것보다도 훨씬 크게 출력됩니다.

그룹 opacity

그룹 opacity 속성인 opacity는 SVG 컨테이너 객체들을 부분적으로는 투명한 레이어로 다루어질 수 있도록 해주며, fill-opacity나 stroke-opacity들과는 독립적인 속성입니다. 현재 opacity의 구현은 꽤 느려서, 참으면서 사용을 해야할 겁니다. fill-opacity와 stroke-opacity는 훨씬 빠르며 컨텐츠에 따라서 같은 결과를 만들어 낼 수도 있습니다.

그룹 opacity는 현재 <g>에만 구현되어 있으며 <text>나 <svg>는 구현되어 있지 않습니다.

폰트 기울이기

Microsoft Windows나 Mac OSX 플랫폼상에서는 문장의 기울였을때 내부의 채워짐이 정확히 일치하지 않습니다. 이 오차는 보통 매우 작은데 약간 더 기울이거나 함으로써 해결할 수 있습니다. 이 오차에 대한 예입니다:

<image>

<image>는 Firefox 1.5의 SVG 이미지들에는 지원되지 않습니다; 대신에 Firefox에서 사용되는 유일한 raster 이미지 포맷입니다.

<image>의 모든 인스터스들은 사용되는 이미지와는 별도의 복사본을 가지는데 이는 만약 컨텐츠내에 아이콘과 같은 이미지에 대해 다수의 복사본을 사용한다면 새겨두어야 할 부분입니다. 안타깝게도 이 경우에 <image>의 <use>는 또 다른 다른 복사본으로 간주합니다.

덧붙여, Firefox 1.5에서는 SVG에서 다수의 raster 이미지를 사용하면 성능히 심각하게 떨어질 수 있습니다.

Events

We support the SVG event attributes with the exception of onfocusin, onfocusout, and onactivate.

Our onload handling is currently somewhat nonstandard, but hopefully not in a way that hurts its use. While the code specified by the onload attribute is called for each element, an SVGLoad event is only fired for the root <svg> element. Some DOM methods will return garbage or an error if called before the corresponding element has been rendered, which you may need to take into account when writing onload code. Such methods are getBBox, getScreenCTM, etc.

We do not support the Adobe specific key events (onkeydown, onkeyup).

Interoperability

If you're working with current SVG content, you may encounter problems loading it into Firefox. Most of the problems tend to be fairly trivial, and are the result of Firefox being a stricter implementation. Jonathan Watt's SVG Authoring Guidelines explains the common problems.

SVG usage situations

Firefox 1.5 handles SVG as entire documents or when referenced by embed, object, or iframe. It cannot currently be used as source for an HTML or XHTML img element or for CSS properties that take an image reference.

Animation

Firefox 1.5 does not implement declarative animation, but does support dynamic scripting. Doug Shepers has used this to create SmilScript, a small Javascript library that implements a subset of SVG's declarative animation.

Bugs fixed in Firefox 2

Firefox 2 fixes some bugs in its SVG implementation. This section provides a quick overview of the most interesting ones.

• A problem filling and stroking text in which the drawing position isn't reset correctly between the two operations has been fixed (bug 333615).

• Radial gradients now properly clamp the fx and fy attributes to ensure that they're within the circumference of a circle (bug 330682).

• Text spans' and text elements' lengths can now be computed using their getComputedTextLength() methods, which improves compatibility with certain web sites (bugs 311031 and 264380).

• <tspan> elements now properly support the dx and dy attributes, and work if the x and y attributes aren't specified (bug 311063).

• Improved invalidation logic on redraws, which prevents dropped pixels in certain cases (bug 312269).

• Fixed a bug that prevented events from being handled properly for objects exposed by the clip path of another object (bug 315861).

• Fixed a bug that would crash if a <path> element had a d attribute with an empty string (bug 318379).

• The overflow attribute now works for the marker element, using the syntax overflow="visible", which did not previously work correctly (bug 320623).

• You can now access the <style> attribute of marker elements without throwing an exception (bug 323589).

• You can now use percent values for the radius of a radial gradient (bug 323669).

• The documentElement.createSVGAngle() method is now implemented (bug 327437).

• Making a <stop> element a child of another <stop> element no longer asserts (bug 328137).

• Changes to the height and width of markers, as well as to the orientation of the marker, now work (bug 325728).

• Font sizes when printing on Windows are no longer much larger than specified for SVG (bug 314707).

Element implementation status