コードブロック記法に書いたsvgを表示する
作ったtakker.icon
コードブロック記法に書いたsvgを画像にして貼り付けられます
勿論codeを書き換えると画像も変化します
reloadすると変更が反映されます
これでsvgの勉強するのが楽になりそう
/icons/すごい.iconerniogi.iconyanma.icon増井俊之.icon
前回に引き続きVercelでserver立ててみた
svg-hosting
repo: https://github.com/takker99/svg-hosting
PR is welcome!
security周りがなっていないと思うので、そのへん修正していただけたら嬉しいです
とりあえずstarだけつけた（意訳：ブクマしたsta.icon
/emoji/thx.icontakker.icon
APIの書式
https://svg-hosting.vercel.app/api/svg?url=$url
scrapboxに貼り付けたコードブロック記法の場合は以下も使える
https://svg-hosting.vercel.app/scrapbox.io/$project/$page/$filename
テスト
https://svg-hosting.vercel.app/scrapbox.io/villagepump/コードブロック記法に書いたsvgを表示する/animation.svg
from svg要素の基本的な使い方まとめ
MITライセンス、著作権はdefghi1977に帰属
拡大しても劣化しない
https://svg-hosting.vercel.app/scrapbox.io/villagepump/コードブロック記法に書いたsvgを表示する/animation.svg
コードブロック記法に書いたsvgを表示する.icon アイコンになる
どれも表示されてない？wogikaze.icon
今見たら復活してた
既知の問題点
security checkがない
<foreignObject>でscriptを埋め込まれたら実行されてしまう
一応、別タブで画像を開かないと実行されないっぽい
最近ブラウザセキュリティに興味が出てきたので、分析してみたくなってちょっと調べてみたら、こんな記事がありましたyuki_minoh.icon
実際に発生したSVGを利用したXSSについて - Qiita
CSPを厳しく設定しましょうということらしいですね
ただ、「ジャンプすると任意JavaScriptを実行できるサイトの用意」のは誰でもできてしまうので気にしなくていいかもです
静的ファイルホスティングさえできればそういう悪質サイト自体の作成は可能
「外部から有害リンクを差し込める」わけではないので良い。。。？
ページ名が変わるとリンク切れになる
こればっかりはしょうがないか
ソースを変更してから、反映されるまで時間がかかり過ぎていませんか？ suto3.icon
こっちだとreloadしてすぐ反映されますtakker.icon
もしかしてCache-Controlをよくわからないで設定したのが原因かな？
これを消したら直るかもしれない
2021-05-12 16:10:39 cacheを無効にしました
Popup menu
code:popup.js
scrapbox.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]);
},
});
code: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に帰属
from /takker/svg形式のテキストを画像にするserverless function
コード書き換えてリロードしても変化しない気がするのですが 増井俊之.icon
おかしいですね。cacheは無効にしたのですｇ……有効になってる！？takker.icon
https://github.com/takker99/svg-hosting/blob/e90504fa6431ea0f7276c781c60e3aa2b7b0704e/api/svg.ts#L42
commitを見てみる
肝心のcache無効化の変更がgit addされてないじゃん……
2022-01-13 12:12:43 直しました！
おお、ありがたい! 増井俊之.icon