SVGビューアー - SVGファイルの閲覧、編集、最適化ツール

SVG画像ファイルの分析

• 横400px、縦400pxサイズのSVG画像ファイル
• 基本構造:
  • 最も外側に width="124"、height="124" の長方形がある
  • rx="24" 属性で角丸処理
  • fill="#F97316" 属性でオレンジ色の背景で塗られている
• 主な図形:
  • <path> タグで白色の多角形の形が描かれている
    • d 属性にパス座標情報が入っている
    • fill="white" で白く塗りつぶされている
  • <circle> タグで黒色の円が描かれている
    • cx="63.2109" cy="37.5391" r="18.1641" で位置とサイズを指定
    • fill="black" で黒く塗りつぶされている
  • <rect> タグで半透明の長方形が45度回転して描かれている
    • opacity="0.4" で透明度を設定
    • fill="#FDBA74" で淡いオレンジ色に塗られている
    • transform="rotate(-45 81.1328 80.7198)" で回転変換
• ファイルサイズの最適化:
  • 元の578 bytesから493 bytesへ15%削減

GN⁺の意見

• SVGはベクターグラフィック形式のため、拡大・縮小しても劣化せず鮮明であるという利点がある。一方で、JPEGやPNGなどのビットマップ画像に比べて、複雑度が高いとファイルサイズが大きくなる欠点がある。
• ファイルサイズが小さいため、Webでの読み込み速度は速そう。しかし、複雑な絵であれば逆にPNGのほうが有利な場合もある。
• rx、circle、rotate などさまざまな機能を活用し、シンプルさの中でも立体感を表現している点が印象的。
• オレンジ色の背景に白と黒を使って色のコントラストをつけ、可読性を高めている。
• アイコンやロゴなどの用途で制作されたように見える。淡いオレンジ色の図形の意味や用途が気になる。

[GN⁺]

Hacker Newsの意見

• SVG最適化ツールのSVGOMGが、別の便利なWebベースのSVGツールとして紹介されている
• バンクーバーに拠点を置く小規模企業のChecker Softwareが、このツールを含む複数のソフトウェアツールを開発している
• UIが分かりやすく、変更点に対する明確なフィードバックを提供してくれるため、SVG使用時に発生するちょっとした問題の解決に役立ちそう
  • たとえば、読み込み時にSVGが意図したサイズより一瞬だけ大きくなってから縮む問題など
• キャンバスのズーム機能が無限大まで行ってしまう面白いバグ（？）がある
• SVGは非常に強力なツールで、最近ではSafariとiOSでfilter: drop-shadowを使ったパララックス透明画像のレンダリング問題を、SVGフィルターとfeGaussianBlurを活用して解決した事例もある
• SVG向けのより多く、より優れたツールが必要とされる中で、このツールの登場を歓迎する雰囲気がある
• テキストからSVGを生成した際、このエディターは生成されたコンテンツをパースできなかったが、CodeBeautifyのSVGビューアーは問題なく動作したという意見もある
• こうした小さなツールは、Hacker News（HN）の精神によく合っていると評価されている