Mozilla Firefox まとめサイト

SVGを利用する 編集

Firefox(Gecko)のネイティブ実装でSVGを表示する場合のまとめ。Firefox 1.5(Gecko 1.8)以上が必要です。

Windows 9x系ではSVGが表示されない場合があります

• Mozilla SVG プロジェクト
• SVG - MDC

SVGとは 編集

Scalable Vector Graphicsの略でベクトル画像フォーマットの一つです。

SVGを見るには ? 編集

Firefox 1.5(Gecko 1.8)以降は標準で見ることができます。レンダラ(バックエンド)としてcairoが使われています。 cairoバックエンドには以下の問題が既に知られています。

• 文字の選択ができない
• 文字装飾が正しく効かない事がある。
• 指定されたフォントに含まれていない文字を表示できないことがある。

SVGが表示されないのけど? 編集

• Windows 9x系ではSVGが表示されない場合があります
• FirefoxのSVG実装はAdobe SVG Viewer等よりも厳格なためSVGによっては表示されない場合もあります。
  • SVG Authoring Guidline
  • Mozilla SVG Project Frequently Asked Questions
  • 名前空間が必要です
• Firefoxの対応してない機能かもしれません。Firefox 1.5, 2.0と3.0では対応している機能に大きな違いがあります。
  • 対応状況

HTTPヘッダ 編集

埋め込み、独立したSVG共にMime-Typeはimage/svg+xmlとXMLのMime-Type*1に対応しています。 image/svg-xmlは初期の実装系が利用していましたが、SVGの仕様には定義されておらずFirefoxは対応していません。 圧縮されたSVG(*.svgz)はサーバー側がgzipエンコードを宣言していると表示できます。

• image/svg+xml Recommended SVG Mime Type
• MIME Type Svg wiki

SVGが見れない場合には一度Live HTTP headersなどでHTTPヘッダを確認してください。

*埋め込み 編集

object要素による埋め込み方法は一般的なものと同じです。type属性はimage/svg+xmlを記述してください。image/svg-xml等では表示されません。

<object data="*.svg" type="image/svg+xml">代替コンテンツ</object>

svg-xml2svg+xml

image/svg-xmlで埋め込まれたSVGをFirefoxで見るためのブックマークレットとGreasemonkeyスクリプト

ビットマップ画像と同様な埋め込み 編集

code>html:img</code>要素や<code>svg:image</code>要素、CSSの背景やリスト画像など、ビットマップ画像用の埋め込みではSVGを使うことはできません。

• Bug 272288 - Allow SVG source for <svg:image>
• Bug 276431 - external SVG not loaded from img tag
• Bug 231179 - SVG images in CSS

ネイティブ実装を無効にする 編集

FirefoxのSVG実装ではなくプラグインを使いたい場合には、 ロケーションバーにabout:configと入力し表示されたページの、svg.enabledをダブルクリックしてfalseにすることで無効化できます。 Firefoxを再起動しなくても反映されるのでSVGの表示確認にも使えます。 また無効化/有効化するための拡張もあります。

• SVG Switcher Update for Firefox 1.5 Beta

ズームとパン 編集

FirefoxはSVGのズームとパンのバックエンドは実装されていますが、フロントエンドは実装されていません。SVG Zoom and Pan拡張を利用してください。

• Firefox zoom and pan extension
  • 朝顔日記 SVG Zoom and Pan

お名前: