是否願意加入三個bbcode以實現論壇支持svg？

留言板
回复
头像
ejsoon
圈圈精英
圈圈精英
帖子： 3078
注册时间： 2022年 11月 18日 17:36
为圈友点赞： 128 次
被圈友点赞： 129 次
联系：
联系 ejsoon

是否願意加入三個bbcode以實現論壇支持svg？

帖子 由 ejsoon »

昨日靈光一閃，之後我在我的本地電腦裝了最新版phpbb之後做了試驗，證明了我的想法是可行的。

然後我去了解了base64的編碼原理，總之就是末尾只有三種情況，一是沒有=，二是有一個=，三是有兩個=。則需要添加三個bbcode。

bbcode:

代码： 全选

[svg]{SIMPLETEXT}[/svg]
html:

代码： 全选

<img src="data:image/svg+xml;base64,{SIMPLETEXT}" alt="svgbase64" style="max-width:100%;">

bbcode:

代码： 全选

[svg1]{SIMPLETEXT}[/svg1]
html:

代码： 全选

<img src="data:image/svg+xml;base64,{SIMPLETEXT}=" alt="svgbase64" style="max-width:100%;">

bbcode:

代码： 全选

[svg2]{SIMPLETEXT}[/svg2]
html:

代码： 全选

<img src="data:image/svg+xml;base64,{SIMPLETEXT}==" alt="svgbase64" style="max-width:100%;">
這三個都不必顯示在編輯框，或者只顯示第一個svg。

這樣將能夠支援svg包括動畫在內的所有元素。

原本有人說svg有「安全風險」，可能是因為svg內可以包含並執行<style>和<script>，，但是如果svg是被<img>標籤的src引用的，則style和script將不會執行，則不會有安全問題。

@圈宝
上次由 ejsoon 在 2024年 9月 24日 11:13，总共编辑 1 次。
https://ejsoon.win/
弈趣極光：享受思維樂趣
页首
头像
ejsoon
圈圈精英
圈圈精英
帖子： 3078
注册时间： 2022年 11月 18日 17:36
为圈友点赞： 128 次
被圈友点赞： 129 次
联系：
联系 ejsoon

Re: 是否願意加入三個bbcode以實現論壇支持svg？

帖子 由 ejsoon »

如果把{SIMPLETEXT}換成{TEXT}則只需要一個bbcode，但是我認為還是上面的辦法好。

因為{SIMPLETEXT}只是不包含等號，不必為了包含一個等號就擴展到{TEXT}。

{TEXT}範圍是很大的，可以是任意的字符。當{TEXT}出現在img的src時，保存bbcode時就會出現一個安全警告。
https://ejsoon.win/
弈趣極光：享受思維樂趣
页首
头像
ejsoon
圈圈精英
圈圈精英
帖子： 3078
注册时间： 2022年 11月 18日 17:36
为圈友点赞： 128 次
被圈友点赞： 129 次
联系：
联系 ejsoon

Re: 是否願意加入三個bbcode以實現論壇支持svg？

帖子 由 ejsoon »

可以在這裏查到一個svg的base64編碼。
https://ejsoon.win/
弈趣極光：享受思維樂趣
页首
头像
圈宝
圈圈守护者
圈圈守护者
帖子： 98
注册时间： 2020年 12月 4日 20:46
我的状态： 🎯
为圈友点赞： 97 次
被圈友点赞： 18 次

Re: 是否願意加入三個bbcode以實現論壇支持svg？

帖子 由 圈宝 »

当时明月在，曾照彩云归
页首
头像
ejsoon
圈圈精英
圈圈精英
帖子： 3078
注册时间： 2022年 11月 18日 17:36
为圈友点赞： 128 次
被圈友点赞： 129 次
联系：
联系 ejsoon

Re: 是否願意加入三個bbcode以實現論壇支持svg？

帖子 由 ejsoon »

圈宝 写了： 2024年 9月 24日 18:45 插入svg可以直接使用自带的图片标签[img]，添加base64支持会占用大量的上下文长度，增加数据库和内建搜索引擎的负担。

您在《把三個大小相同的正方形，割補成一個大正方形，有幾種方法？》就做的挺好。
我在《把三個大小相同的正方形，割補成一個大正方形，有幾種方法？》這個帖子裏，用的是外鏈或者錄屏後轉成了gif。

base64確實會有增加搜索引擎負擔的憂慮。然而如果我是把svg的文本放進[ code] [ / code]中的話，文本長度也差不多，並且svg內含有義文字還可能會被搜索到，而base64都是無義的，就不會被搜索到。

下面是一個svg文件的文本，它的大小是10k，當它轉成base64將是14k：

代码： 全选

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" width="480" height="480" viewBox="0 0 480 480">
	<path fill="#acf" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke="#444" d="M 0 0 v 480 h 480 v -480 Z">
	</path>
	<path id="p3" fill="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke="#444" d="M 120 120 L 233.137 120 L 233.137 280 Z">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" values="0 120 120;-54.736 142.02 245.959" begin="m1.begin" dur="1s" fill="freeze"/>
<animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0;22.02 125.959" dur="1s" fill="freeze"  additive="sum" begin="m1.begin"/>

<animateTransform attributeName="transform" attributeType="XML" type="rotate" values="0 142.02 245.959;54.736 120 120" begin="m2.begin" dur="1s" fill="freeze" additive="sum"/>
<animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0;-22.02 -125.959" dur="1s" fill="freeze"  additive="sum" begin="m2.begin"/>

<animateTransform attributeName="transform" attributeType="XML" type="rotate" values="0 233.137 280;90 245 228" begin="m2.begin" dur="1s" fill="freeze" additive="sum"/>
<animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0;11.863 -52" dur="1s" fill="freeze"  additive="sum" begin="m2.begin"/>

<animateTransform id="m3" attributeName="transform" attributeType="XML" type="rotate" values="0 245 228;-90 233.137 280" begin="m2.end+2s" dur="1s" fill="freeze" additive="sum"/>
<animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0;-11.863 52" dur="1s" fill="freeze"  additive="sum" begin="m3.begin"/>
	</path>
	<path id="p4" fill="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke="#444" d="M 233.137 120 L 233.137 280 L 360 190.294 L 360 120 Z">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" values="0 120 120;-54.736 142.02 245.959" begin="m1.begin" dur="1s" fill="freeze"/>
<animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0;22.02 125.959" dur="1s" fill="freeze"  additive="sum" begin="m1.begin"/>

<animateTransform attributeName="transform" attributeType="XML" type="rotate" values="0 142.02 245.959;54.736 120 120" begin="m2.begin" dur="1s" fill="freeze" additive="sum"/>
<animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0;-22.02 -125.959" dur="1s" fill="freeze"  additive="sum" begin="m2.begin"/>

<animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0;11.863 -52" dur="1s" fill="freeze"  additive="sum" begin="m2.begin"/>

<animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0;-11.863 52" dur="1s" fill="freeze"  additive="sum" begin="m3.begin"/>
	</path>
	<path id="p2" fill="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke="#444" d="M 120 166.863 L 153.137 166.863 L 233.137 280 L 120 280 Z">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" values="0 233.137 280;-144.736 142.02 50" begin="m1.begin" dur="1s" fill="freeze"/>
<animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0;-91.117 -230" dur="1s" fill="freeze"  additive="sum" begin="m1.begin"/>

<animateTransform id="m2" attributeName="transform" attributeType="XML" type="rotate" values="0 142.02 50;144.736 233.137 280" begin="m1.end+2s" dur="1s" fill="freeze" additive="sum"/>
<animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0;91.117 230" dur="1s" fill="freeze"  additive="sum" begin="m2.begin"/>

<animateTransform attributeName="transform" attributeType="XML" type="rotate" values="0 233.137 280;180 75 92" begin="m1.end+2s" dur="1s" fill="freeze" additive="sum"/>
<animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0;-158.137 -188" dur="1s" fill="freeze"  additive="sum" begin="m2.begin"/>

<animateTransform attributeName="transform" attributeType="XML" type="rotate" values="0 75 92;180 233.137 280" begin="m3.begin" dur="1s" fill="freeze" additive="sum"/>
<animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0;158.137 188" dur="1s" fill="freeze"  additive="sum" begin="m3.begin"/>
	</path>
	<path id="p5" fill="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke="#444" d="M 120 280 L 233.137 280 L 120 360 Z">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" values="0 233.137 280;-144.736 142.02 50" begin="m1.begin" dur="1s" fill="freeze"/>
<animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0;-91.117 -230" dur="1s" fill="freeze"  additive="sum" begin="m1.begin"/>

<animateTransform attributeName="transform" attributeType="XML" type="rotate" values="0 142.02 50;144.736 233.137 280" begin="m2.begin" dur="1s" fill="freeze"  additive="sum"/>
<animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0;91.117 230" dur="1s" fill="freeze"  additive="sum" begin="m2.begin"/>

<animateTransform attributeName="transform" attributeType="XML" type="rotate" values="0 233.137 280;-90 75 92" begin="m2.begin" dur="1s" fill="freeze" additive="sum"/>
<animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0;-158.137 -188" dur="1s" fill="freeze"  additive="sum" begin="m2.begin"/>

<animateTransform attributeName="transform" attributeType="XML" type="rotate" values="0 75 92;90 233.137 280" begin="m3.begin" dur="1s" fill="freeze" additive="sum"/>
<animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0;158.137 188" dur="1s" fill="freeze"  additive="sum" begin="m3.begin"/>
	</path>
	<path id="p6" fill="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke="#444" d="M 120 360 L 166.863 326.863 L 190.294 360 Z">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" values="0 166.863 326.863;35.264 337.9795 50" begin="m1.begin" dur="1s" fill="freeze"/>
<animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0;171.117 -276.863" dur="1s" fill="freeze"  additive="sum" begin="m1.begin"/>

<animateTransform attributeName="transform" attributeType="XML" type="rotate" values="0 337.9795 50;-35.264 166.863 326.863" begin="m2.begin" dur="1s" fill="freeze" additive="sum"/>
<animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0;-171.117 276.863" dur="1s" fill="freeze"  additive="sum" begin="m2.begin"/>

<animateTransform attributeName="transform" attributeType="XML" type="rotate" values="0 120 360;90 371.863 68" begin="m2.begin" dur="1s" fill="freeze" additive="sum"/>
<animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0;251.863 -292" dur="1s" fill="freeze"  additive="sum" begin="m2.begin"/>

<animateTransform attributeName="transform" attributeType="XML" type="rotate" values="0 371.863 68;-90 120 360" begin="m3.begin" dur="1s" fill="freeze" additive="sum"/>
<animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0;-251.863 292" dur="1s" fill="freeze"  additive="sum" begin="m3.begin"/>
	</path>
	<path id="p7" fill="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke="#444" d="M 166.863 326.863 L 190.294 360 L 360 360 L 280 246.863 Z">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" values="0 360 360;35.264 309.282 430" begin="m1.begin" dur="1s" fill="freeze"/>
<animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0;-50.718 70" dur="1s" fill="freeze"  additive="sum" begin="m1.begin"/>

<animateTransform attributeName="transform" attributeType="XML" type="rotate" values="0 309.282 430;-35.264 360 360" begin="m3.begin" dur="1s" fill="freeze" additive="sum"/>
<animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0;50.718 -70" dur="1s" fill="freeze"  additive="sum" begin="m3.begin"/>
	</path>
	<path id="p8" fill="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke="#444" d="M 360 360 L 280 246.863 L 360 190.294 Z">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" values="0 360 360;-54.736 309.282 430" begin="m1.begin" dur="1s" fill="freeze"/>
<animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0;-50.718 70" dur="1s" fill="freeze"  additive="sum" begin="m1.begin"/>

<animateTransform attributeName="transform" attributeType="XML" type="rotate" values="0 309.282 430;54.736 360 360" begin="m3.begin" dur="1s" fill="freeze" additive="sum"/>
<animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0;50.718 -70" dur="1s" fill="freeze"  additive="sum" begin="m3.begin"/>
	</path>
	<path id="p1" fill="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke="#444" d="M 120 120 L 120 166.863 L 153.137 166.863 Z">
<animateTransform id="m1" attributeName="transform" attributeType="XML" type="rotate" values="0 233.137 280;-144.736 142.02 50" begin="3s;m3.end+3s" dur="1s" fill="freeze"/>
<animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0;-91.117 -230" dur="1s" fill="freeze"  additive="sum" begin="m1.begin"/>

<animateTransform attributeName="transform" attributeType="XML" type="rotate" values="0 142.02 50;144.736 233.137 280" begin="m2.begin" dur="1s" fill="freeze" additive="sum"/>
<animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0;91.117 230" dur="1s" fill="freeze"  additive="sum" begin="m2.begin"/>

<animateTransform attributeName="transform" attributeType="XML" type="rotate" values="0 120 166.863;180 405 68" begin="m2.begin" dur="1s" fill="freeze" additive="sum"/>
<animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0;285 -98.863" dur="1s" fill="freeze"  additive="sum" begin="m2.begin"/>

<animateTransform attributeName="transform" attributeType="XML" type="rotate" values="0 405 68;180 120 166.863" begin="m3.begin" dur="1s" fill="freeze" additive="sum"/>
<animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0;-285 98.863" dur="1s" fill="freeze"  additive="sum" begin="m3.begin"/>
	</path>
</svg>
我可以開發一個phpbb插件，把文本svg正文轉成img，但是這其實也跟base64差不多了，都是把svg的內容發到了文字框裏。

我以前的phpbb就嘗試過這種方法，感覺問題不大（我之前那個虛擬主機連文件+數據庫，空間最多只給100M）。
https://ejsoon.win/
弈趣極光：享受思維樂趣
页首
头像
圈宝
圈圈守护者
圈圈守护者
帖子： 98
注册时间： 2020年 12月 4日 20:46
我的状态： 🎯
为圈友点赞： 97 次
被圈友点赞： 18 次

Re: 是否願意加入三個bbcode以實現論壇支持svg？

帖子 由 圈宝 »

维持原来的意见，不会考虑支持这样的插入形式。
当时明月在，曾照彩云归
页首
回复

回到 “留言板”

在线用户

正浏览此版面之用户： 没有注册用户 和 14 访客