Searchable SVG Generator
https://searchable-svg.hata6502.com/
ページ内検索やテキスト選択できる画像をSVGとして生成するツール
https://gyazo.com/f3a65f29d9be88c2a6aefdc5511d238d
Searchable PDFがあるなら、WebページにSearchable SVGがあってもいいなと思ったhata6502.icon
CMSの表現力不足を手っ取り早く解決したいとき、そのまま画像化する運用がある
例 https://www.npmjs.com/package/zod
資金調達のAnnouncementが丸ごと画像
https://nota.gyazo.com/a94b7a43b6ac7811199479cfec3ad181
画像で手っ取り早くしながらも、テキストコピーしたりリンク置いたりできるといい
code: html
<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>
https://nota.gyazo.com/ed03fa4b58078287e44a0abd33338436
#個人開発