SVGだと、画像内の文字列を選択・検索できるのが便利！

記事「Blogger:SVGファイルを「画像を挿入」で挿入しようとしたら失敗したので、インラインSVGにしました。」にて、インラインのSVGを表示してみました。

そのときに使用した SVG はこちらです。



インライン SVG


そのときに気が付いたことなのですが、SVG として表示したテキストは、テキストとして選択できるんですね。

そして、ブラウザの検索機能を使用して、その文字列を検索することもできます。




そのような「SVG内のテキストは選択・検索可能」な挙動を示すので、SVG を使用して大量の情報を表示したとしても、ユーザは情報を検索して、必要な箇所を見つけることができます。

また、テキストとしてコピーも可能なので、テキストを装飾して描画しても、ユーザはその情報をコピーして取得できます。


この特性を使用することで、ユーザに対して新しい体験を提供できそうですね！


なお、この動作のチェックは以下のブラウザ・バージョンで行いました。

• Chrome　バージョン：35.0.1916.114 m
• Internet Explorer　バージョン：9.0.8112.16421
• Firefox　バージョン：29.0.1

SVG 内に複数のテキスト要素がある場合、Chrome と Firefox では SVG 内のテキストを選択して複数のテキスト要素を選択できました。
しかし、Internet Explorer の場合は、SVG 内のテキストを選択した場合、そのテキスト要素のみしか選択できませんでした。

Internet Explorer ですべてのテキスト要素を選択する場合、SVG 全体を選択する必要がありました。

このように、ブラウザによって、SVG 内のテキストの選択時の挙動が微妙に異なるようです。