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

 (svgviewer.dev)
4 ポイント 投稿者 GN⁺ 2024-04-28 | 1件のコメント | WhatsAppで共有
  • SVG ViewerはSVGをアップロードした後、プレビューとコード編集を1つの画面で行えるようにするウェブツール
  • 回転、左右・上下反転、サイズ変更、コード整形といった基本的な編集作業をブラウザ上ですぐに実行できる
  • 最適化の例では、SVGサイズを**578 bytesから493 bytesへ削減し、-15%**減少した結果を示している
  • SVGのダウンロードだけでなく、React、React Native、PNG、Data URIへの変換経路もあわせて提供する
  • アイコン一覧とアップロード・コピー・ダウンロード・共有の操作が同じ画面にあり、SVGの確認から再利用まで素早くつなげられる

SVGの編集と最適化

  • SVG ViewerはSVGファイルを表示、編集、最適化できるウェブツール
  • 編集画面はSVGコードとプレビューを同時に表示し、コード修正の結果をすぐ確認できる

  • 提供される操作

    • Rotate
    • Flip Y
    • Flip X
    • Change dimensions
    • Optimize
    • Prettify
    • Clear
    • サンプルSVGは400px x 400pxのサイズで表示され、コード編集領域に<svg>コードが表示される
    • 最適化状態は578 bytes → 493 bytes、**-15%**と表示される

インポートとエクスポート

  • ファイル操作ではUpload、Copy、Download、Shareの動作を提供する
  • エクスポートまたは変換先:
  • 画面にはeye-close、gps、minus、lock-line、email、battery、document、comment、home、search、wifiなど複数のSVGアイコン項目とLoad More SVGsが表示される
  • フィードバック、利用規約、プライバシーポリシーのリンクも提供される

関連記事

1件のコメント

 
GN⁺ 2024-04-28
Hacker News の意見

  • よく使うWebベースのSVGツールとして https://jakearchibald.github.io/svgomg/ がある。設定をかなり細かく変更できる SVG最適化ツール。

  • 週末にHacker Newsでここまで話題になるとは思わなかった。私たちはBC州バンクーバーにある小さな会社で、ソフトウェアツールを作っている: https://www.checkersoftware.ca/
    質問があれば教えてほしい。

    • このWebアプリを今後も 広告ベース で維持する予定なのか、それとも近い将来、追加機能付きの有料 pro版 が出る予定なのか気になる。
    • ほとんどの例には長い数字列を含む path が多く、どの path が画像内のどの図形に対応するのかすぐには分かりにくい。
      エディタでコードにカーソルを載せると、その パスの色やアウトライン を一時的に変え、テキスト選択にも同じように反応するようにできるのか気になる。
    • React開発者ではないのでよく分からず聞くのだが、SVGをReactへエクスポートする機能 は何に使うのか気になる。
      React開発者がSVGをインラインで入れる代わりにReactエクスポート機能を使う理由はあるのだろうか？
    • アイコン作業ではこのツールをいつも使っている。

  • 少し触ってみたが、自分が使うSVGで遭遇する細かな問題をいつか解決しようとするときに、とても役立ちそうだ。UIが分かりやすく、変更に対するフィードバックも明確なので、すぐブックマークした。
    一部のSVGは読み込み中に一瞬ページを横に広げ、その直後に意図したサイズへ収まる問題があった。viewBox、width、height をいじってみたが解決できなかった。この初期の 伸びる現象 を減らすにはどうすればよいだろうか？

    • スタイル適用前にSVGがちらつく現象は、明示的な ビューボックス（viewBox）と ビューポート（width, height）を指定すると直せる: https://www.sarasoueidan.com/blog/svg-style-inheritance-and-...
    • ブラウザより速くSVGを別形式へその場で変換できるのか気になる。素人目には、ビットマップを最大サイズで初期化してから、その中にSVGをパースする動きのように聞こえる。

  • 本当に良いツールだ。1か所に機能がたくさん集まっている。普段はphpStormを使っていて、SVGOMG式の最適化機能はないが、コード整形はうまくできる。
    編集を始められるサンプルがもっと良いといいし、path だけでなく他の 基本図形 も使うとよいと思う。グリッドもあると便利だ。
    例えば検索アイコンは、viewBox をきちんと設定した circle と line で作れる。原点を円の中心に置けば x、y の値なしで半径だけあればよく、こういう形で信じられないほど最適化できる。
    一般的な検索アイコンは、小数点以下6桁の NASA数字 が何百個も入った path につぶされている。実際には整数で定義した円1つで十分で、Adobe Illustratorが書き出したガラクタは必要ない。
    SVGは芸術的な媒体で、本当に好きだ。だがアーティストも開発者もそうは見ていないようだ。そのため大半のSVGは、可能性の精神を十分に生かせておらず、単なるファイル形式以上のものだという点がうまく表れていない。

  • SVGは本当に強力だ。先週、フィルタ drop-shadow の入ったパララックス透明画像がMac SafariとiOSでめちゃくちゃに見える問題があったが、解決策は画像の外形線をSVGで作り、feGaussianBlur 入りのSVGフィルタで影を付けることだった。
    まだSVGで可能なことの表面をなぞっているだけの気がする。最適化にはsvgomgを使ってきたが、このツールには有用な機能がさらにかなり多そうだ。

    • Qt/QMLのデスクトップフロントエンドから始めたが、どれだけ多くの部分を SVGイメージマップ のような構成だけで作れるのか考えるようになった。
      Jupyterをデータ接続やSVGツールと一緒に立ち上げてみると、かなり目を開かされる体験だった。
    • 現実的にも政治的にも可能ではないだろうが、DWG、DXF、DGN がSVGに置き換われば本当にいいと思う。AEC業界の2D図面が多くのプログラムでまともに使えないというのはおかしい。

  • Inkscapeを使い、足りないものがあればXara Xtremeや昔のLinux向け無料版を使っている。
    ところで SVGを最適化する とはどういう意味なのか？

    • 不要な情報を取り除くこと。Inkscapeはいろいろ余計なものを追加する。例えばFigmaから単純なSVGを書き出し、Inkscapeで開いて保存してから比較してみると違いが分かる。

  • このサイトが本当に好きで、数え切れないほど使ってきた。変な SVG要素 を理解し、結果をすばやく確認するのにとても役立つ。

  • 数年前にMacで BoxySVG を10ドルで買ったが、小さくて信頼できるツールだった。
    https://boxy-svg.com/

    • 今は サブスクリプションモデル に移行したようだ。年に数回しか必要ないので、10ドルなら買ってそのまま持っておきたかった。Monodrawはそうやって一度買って手元に置いていて、たまに使うが今でも満足できるツールなので気に入っている。
    • Boxyは、すばやくざっくり手直しするための 軽量SVGエディタ としておすすめできる。

  • SVGを扱うときに一番好きなリソースでありツールだ。いろいろ探したが、これより良いものは見つからなかった。