SVGテキストをパスに変換しても、グリフを再利用できますか？

14

大量のテキストを含むSVGがあります。スペース番号が書かれた駐車場の地図です。これをWebブラウザーで表示します。Firefoxのすばらしい小さなバグのおかげで、ブラウザーはテキストを正しくレンダリングしません。ブー。

そこで、テキストをパスに変換しました。最大4000個のラベルについて話しています。たぶん15,000個の新しい図形がベクターになりました。4MBです。通常は、これは圧縮に自分自身を貸すだろう主張するかもしれないけど、私はする必要があります HTMLにインラインこのSVGを。CSSの変更を動的に追加していますが、これがクロスブラウザサポートの唯一の方法です。とにかく、生の（精練された）出力は大きすぎて役に立たない。

ここで私を襲ったのは、これらすべてのスペース番号が共通のグリフを共有していることです。ゼロから9。すべての番号のすべてのインスタンスに形状定義を含めるのはなぜですか？これらを重複排除できますか？

私はInkscapeを使用していますが、提案を受け入れています。

inkscape svg

— オリ
ソース

SVGファイルを共有して、実験することができますか？

— -JohnB

1

バグ（スクリーンショット）とは何ですか？また、どのようにエクスポートしてブラウザにロードしていますか？いくつかのCSSスタイリング、またはページにテキスト要素を修正/置換する小さなスクリプトを追加するだけで修正できる可能性があります。これが動的なマップ表示である場合、実際のマップに変換することができます。ほとんどのブラウザマッピングライブラリ（および多くのデータベースベースのライブラリ）は、ラベル付けに優れたサポートを提供します。

— -brichins

1

申し訳ありませんが、SVGは私が共有するものではありません（クライアントに属します）が、バグはについて知られています。これは本質的に、SVGのフォントが1ポイントを超えて縮小しないことを意味します。数千の駐車スペースがある地図でズームアウトすると、深刻な問題になります。それらは（たとえば）〜0.08ptである必要があり、実際には13ptです。

— オリ

1

あなたは間違ったバグ番号を持っている、あなたは実際にこれを

— ロバート・ロングソン

これをサブセットでテストすることもできpath|simplifyますが、まったく役立ちますか？小文字の「s」は28ポイントのパスに変換され、簡略化して17にドロップします。簡略化されたバージョンと単純化されていないバージョンをズームしてもオーバーレイされます。

— クリスH

6

この<use>要素を使用すると、ドキュメント内の別の場所で定義されたオブジェクトを再利用できます。たとえば、各グリフをaとして定義し、<symbol>それらを複数回再利用できます。：ここでは素敵なことについての記事だ-構造化、グループ化、およびSVGでの参照<g>、<use>、<defs>および<symbol>要素。

しかし、Inkscapeで直接それを行う方法はわかりませんが、特に、すでにテキストとして持っているテキストの束についてはそうではありません。SVGを後処理し、再利用可能なすべてのパスを見つけるためのスクリプトを作成する必要がある場合があります。

— ラーフル
ソース

これ<use>は私がこれを尋ねたときに私が考えていたものでした、スクリプトは方法です。ほぼ同一のマークアップを重複排除するものは何もないというのは馬鹿げているようです。

— オリ

@Oliは、同一のマークアップを重複排除することすらありませんでした。私は自分で書かなければなりませんでした（そして同じ意味で、バイトと同じです;それらをハッシュし、ハッシュを比較しました）

— クリスH

私は昼食を熟考しましたが、私はinkscape内の（python）スクリプトが行く方法だと感じています。スクリプトはテキストをテキストとして開始し、それを<symbol>s への参照に置き換えます（または<def>、テキストからパスへのグリフができるように見える

— Chris H

4

さまざまな程度の成功をもたらす圧縮オプションがいくつかあります。それらをテストするために、繰り返しテキストがたくさんあるアートワークファイルを作成しました。展開されていない場合、ファイルサイズは13.8 KBです。展開すると、ファイルサイズは1.42 MBになります。

適切なオプション：SVGZを使用する-46.5 KB

展開されたアートワークをSVGZとして保存すると、標準のSVGよりも大幅に小さい46.5 KBの出力ファイルが得られました。ただし、サポートは異なる場合があります。

より良いオプション：Scourで圧縮-21.1 KB

Scourは、SVGファイルをスクラブして最適化するツールです。の「最大圧縮」コマンドを使用してscour -i input.svg -o output.svgz --enable-viewboxing --enable-id-stripping --enable-comment-stripping --shorten-ids --indent=none、展開されたアートワークは21.1 KBに縮小されました。元の拡張されていないファイルサイズからそれほど遠くありません！

— JohnB
ソース

3

それは私のために良いの公正な量をするのかしながら、精練は、それだけで（与えられた圧縮ジャンクを削除していない巨大なオブジェクトの数を）、私の「4メガバイトは」ポスト洗掘ました。圧縮されたコンテンツは素晴らしいですが、これについては先ほど述べたはずですが、ブラウザーのターゲット設定の問題（およびフロントエンド操作の要件）のためにSVGをインライン化する必要があります。辛いことはわかっていますが、今はもっと痛いですと言ったら私を信頼してくださいD：

— オリ

私は言っておくべきだった、の精練部分はscour圧縮されません。また、gzipを介してファイルをスローすることもできますが、IDと空白の縮小化が主な目的です。

— オリ

@Oli正しい、したがって、「optimize」という単語を慎重に選択します:)それは、あなたのファイルがすでに洗われているのは残念です... ack！

— JohnB

Illustratorを少しいじりました。そのSVG出力はSymbolsを尊重します。以下に簡単な例を示します。かなり手間がかかりますが、テキストを個々の文字に分解して記号に置き換えるIllustratorスクリプトを作成できる場合があります。私が見る最大のハードルは、ローテーションに対処することです。すべてのテキストがX軸と平行である場合、難しくはないように見えますが、角度のあるテキストを扱うのは難しいかもしれません。もちろん、Illustratorを使用できない場合、これらはすべて

— 役に立た

3

これはブラウザ内またはサーバー上のソリューションです

SVGファイルを最適化するには、さまざまな方法があります。あなたはすでにそれをかなりやったようです。

私が非常に有用だと思ったいくつかのリソースは、非常に具体的な詳細に焦点を当てたcss-tricksの記事です。具体的には、SVGOを使用するツール。

繰り返しパスが多数ある場合は、JavaScriptを使用して図形を動的に作成することを検討します。ここに例があります。1つの方向は、各グリフに対して定義された関数を持ち、その関数の要求によって作成されたsvg要素内の各パスを単純に持つことです。または、完全な文字列や引数の配列を使用して、インラインsvgを作成します。もちろん、これは、パスが上記の関数を要求するために必要なコードの長さよりも長いことを期待しています（非常に簡単な仮定）。

— ルカ
ソース

1

この答えは複数の可能な解決策を提示しますが、SVGOは最も興味深いようです。.svgファイルで実行して最適化することもできます。ただし、現在、パスの重複排除は行われていないようです。とにかく質問者がカスタムスクリプトを実行することになった場合、SVGOの拡張機能として実行することをお勧めします。

— 日本時間

確かに、パスへの変換前（または変換中）に@jpaの重複排除を行う方法があります。テキストchar "1"のすべてのインスタンスをパス<use xlink:href="#digit_one">で置き換え digit_oneます

— クリスH

@ChrisH私は、なぜ同じように後でデデュープできなかったのかわかりません。開始点ですべてのパスを起点に正規化し、ハッシュを取得し、それを使用してパスが既に発生しているかどうかを確認します。確かに、それほどエレガントではありませんが、動作するはずであり、すべてのテキストレイアウトロジックを再実装/把握するよりも簡単に実装できます。

— 日本時間

@jpaは可能ですが、原点を正規化すると丸めエラーが発生した場合、ハッシュは一致しません。私が考えているスクリプトは、inkscapeのtext-to-pathを呼び出して文字パスをレイアウトしますが、それらをマスターセットへの参照に置き換えます。

— クリスH

@jpaと丸め誤差は現実のものです。ハッシュ台無しに十分-おもちゃ例えば第小数場所における1によってゼロと異なるの最初の二次曲線に

— クリスH

2

ここで非常に高いレベルで、スクリプトが行うべきことです。好みの言語と環境を自由に使用してください。これは、探しているものを提供するロジックの出発点にすぎません。

SVGのxml内のすべてのテキスト要素をループし、数値テキスト（駐車場、svgにさらにテキストがあるかどうかは指定しません）があるものについては、Inkscapeによって自動的に作成されたIDをその駐車場のある文字列に変更しますスポットの番号。Inkscapeは一意のIDのみを必要とし、説明のないIDを生成しますが、他のソフトウェアによって作成されたID、またはユーザーが手動で作成または変更したIDを尊重し、変更しません。
テーブルに、各駐車スポットのテキスト要素のxおよびy座標を保存します。
Inkscapeでもスクリプトでも、すべての駐車スポットテキストをパスに変換します。
0〜9の数字の場合、SVGファイルに適切な <defs>場合、各数字のパス情報を定義セクションを。
すべてをループする <g>駐車場の sをし、それらに置き換えます<use xlink:href="#digit" x=x y=y />
利益

私はあなたが対処しなければならないいくつかの合併症とそれらの幸運を予見できます。

ループは2桁以上の駐車スポットの文字列を分割する必要があり、最初の数字と後続の数字の間の適切な間隔は注意が必要です。これは、使用しているフォントに大きく依存します。
駐車スポットがどの方向にあるか、またはカーブしたセットアップにあるかどうかを指定しません。2桁以上の手動のX、Yオフセットのため、駐車スポットの「方向」と、最初の桁から個々の桁の異なるパスを正しく配置する方法を把握するために、追加のロジックが必要になる場合があります。

お役に立てれば。幸運を。

— ボットヒソ
ソース