コードブロック記法に書いたsvgを表示する
作った
コードブロック記法に書いたsvgを画像にして貼り付けられます
勿論codeを書き換えると画像も変化します
reloadすると変更が反映されます
これでsvgの勉強するのが楽になりそう
前回に引き続きVercelでserver立ててみた
PR is welcome!
security周りがなっていないと思うので、そのへん修正していただけたら嬉しいです
とりあえずstarだけつけた（意訳：ブクマした
APIの書式
https://svg-hosting.vercel.app/api/svg?url=$url scrapboxに貼り付けたコードブロック記法の場合は以下も使える
https://svg-hosting.vercel.app/scrapbox.io/$project/$page/$filename テスト
from svg要素の基本的な使い方まとめ
MITライセンス、著作権はdefghi1977に帰属
拡大しても劣化しない
どれも表示されてない？
今見たら復活してた
既知の問題点
security checkがない
<foreignObject> で script を埋め込まれたら実行されてしまう一応、別タブで画像を開かないと実行されないっぽい
最近ブラウザセキュリティに興味が出てきたので、分析してみたくなってちょっと調べてみたら、こんな記事がありました
CSPを厳しく設定しましょうということらしいですね
ただ、「ジャンプすると任意JavaScriptを実行できるサイトの用意」のは誰でもできてしまうので気にしなくていいかもです
静的ファイルホスティングさえできればそういう悪質サイト自体の作成は可能
「外部から有害リンクを差し込める」わけではないので良い。。。？
ページ名が変わるとリンク切れになる
こればっかりはしょうがないか
ソースを変更してから、反映されるまで時間がかかり過ぎていませんか？ 
こっちだとreloadしてすぐ反映されます
もしかしてCache-Controlをよくわからないで設定したのが原因かな？
これを消したら直るかもしれない
2021-05-12 16:10:39 cacheを無効にしました
Popup menu
popup.jsscrapbox.PopupMenu.addButton({
title: 'SVG',
onClick: text => {
if (!/https?:\/\/\S+\.svg\s*/.test(text)) return; // SVG URLがなければ何もしない
return text.replace(/(https?:\/\/\S+\.svg)\s*/g,`[https://svg-hosting.vercel.app/api/svg?url=$1]`);
},
});animation.svg<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<path d="M 25 175 L 25 25" stroke="black" stroke-dasharray="2"/>
<path d="M 175 25 L 175 175" stroke="black" stroke-dasharray="2"/>
<path d="M 25 25 L 175 25" stroke="black" stroke-dasharray="2"/>
<path d="M 25 175 Q 25 25 175 25" stroke="black" stroke-dasharray="2" fill="none"/>
<path d="M 25 25 Q 175 25 175 175" stroke="black" stroke-dasharray="2" fill="none"/>
<path d="M 25 175 C 25 25 175 25 175 175" stroke="blue" fill="none"/>
<path stroke="red">
<animate attributeName="d" calcMode="linear" from="M 25 175 L 25 25" to="M 25 25 L 175 25" begin="0s" dur="6s" repeatCount="indefinite"/>
</path>
<path stroke="red">
<animate attributeName="d" calcMode="linear" from="M 25 25 L 175 25" to="M 175 25 L 175 175" begin="0s" dur="6s" repeatCount="indefinite"/>
</path>
<circle fill="red" r="5">
<animateMotion path="M 25 175 Q 25 25 175 25" begin="0s" dur="6s" calcMode="linear" repeatCount="indefinite"/>
</circle>
<circle fill="orange" r="5">
<animateMotion path="M 25 25 Q 175 25 175 175" begin="0s" dur="6s" calcMode="linear" repeatCount="indefinite"/>
</circle>
<circle fill="red" r="5">
<animateMotion path="M 25 175 C 25 25 175 25 175 175" begin="0s" dur="6s" calcMode="linear" repeatCount="indefinite"/>
</circle>
</svg>
from svg要素の基本的な使い方まとめ
MITライセンス、著作権はdefghi1977に帰属
コード書き換えてリロードしても変化しない気がするのですが 
おかしいですね。cacheは無効にしたのですｇ……有効になってる！？
https://github.com/takker99/svg-hosting/blob/e90504fa6431ea0f7276c781c60e3aa2b7b0704e/api/svg.ts#L42
commitを見てみる
肝心のcache無効化の変更が
git add されてないじゃん……2022-01-13 12:12:43 直しました！
おお、ありがたい!