日々のコンピュータ情報の集積と整理

Dr.ウーパのコンピュータ備忘録

2014年6月3日火曜日

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

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

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

a@***.*** b@***.*** c@***.*** d@***.***

インライン 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 内のテキストの選択時の挙動が微妙に異なるようです。





関連記事

関連記事を読み込み中...

同じラベルの記事を読み込み中...
Related Posts Plugin for WordPress, Blogger...