Searchable SVG Generator

Searchable SVG Generator

https://searchable-svg.hata6502.com/
ページ内検索やテキスト選択できる画像をSVGとして生成するツール

Searchable PDFがあるなら、WebページにSearchable SVGがあってもいいなと思ったhata6502

CMSの表現力不足を手っ取り早く解決したいとき、そのまま画像化する運用がある
例 https://www.npmjs.com/package/zod
資金調達のAnnouncementが丸ごと画像

画像で手っ取り早くしながらも、テキストコピーしたりリンク置いたりできるといい
html
Copied!
<svg role="img" viewbox="0 0 1364 502">
<title>(alt text here)</title>
<!--(Please replace to the actual src URL. )-->
<image href="blob:https://searchable-svg.hata6502.com/460d47e7-5753-4361-8665-cbc4717acd76"></image>

<style>
text {
fill: transparent;

&::selection {
background: #cceeff;
color: #000000;
}
}
</style>
<text x="59" y="181" textlength="239" lengthadjust="spacingAndGlyphs" font-size="28px">Announcement
</text><text x="60" y="243" textlength="1143" lengthadjust="spacingAndGlyphs" font-size="25px">Zod has received the inaugural Clerk OSS Fellowship!! Clerk is actively funding my full-time work
</text><text x="59" y="278" textlength="1138" lengthadjust="spacingAndGlyphs" font-size="25px">on Zod's next major version. Ifyou're building an app, try Clerkfor authenticating and managing
</text><text x="60" y="310" textlength="176" lengthadjust="spacingAndGlyphs" font-size="21px">user accounts.
</text><text x="85" y="389" textlength="299" lengthadjust="spacingAndGlyphs" font-size="21px">Read the announcement
</text></svg>



[TODO
くっきりレンズに依存してる
SVGだとちょっとアクセシビリティに弱いのかもしれない
しかしPNG化できたりする

関連ページ

Powered by Helpfeel