在博客園的markdow編輯器中使用SVG

[comment]: # 在博客園的markdow編輯器中使用SVG

SVG

SVG 意為可縮放矢量圖形（Scalable Vector Graphics）。 SVG 使用 XML 格式定義圖像。

問題

如果在博客園的markdow編輯器中直接使用SVG，由於保存時，markdown引擎會插入一些html標簽，導致看不到圖像。

解決方案

可以使用div標簽或者table標簽來解決這個問題。

• 使用div

<div width="100%" style="overflow-x: auto;"> 
  <svg width="140" height="170">
    <title>SVG Sample</title>
    <desc>This is a sample to use SVG in markdown on the website cnblogs.</desc>
    <circle cx="70" cy="95" r="50" style="stroke: black; fill: none;"/>
  </svg>
</div>

示例：注意:在div前要有一個空行。

• 使用table

<table>
  <tr>
    <td>
      <svg width="140" height="170">
        <title>SVG Sample</title>
        <desc>This is a sample to use SVG in markdown on the website cnblogs.</desc>
        <circle cx="70" cy="95" r="50" style="stroke: black; fill: none;"/>
      </svg>
    </td>
  </tr>
</table>

示例：注意:在table前要有一個空行。

graphviz: 一個可以通過文本產生圖片的工具

訪問： http://graphviz.org/

• 編輯一個test.dot文件

digraph G {
    bgcolor="cornsilk"
    splines="FALSE";
	size="6,6";
    label="Spark Cluster + AKKA"
	node [colorscheme=paired12, color=1, style=filled];
    
    akka_client     [label="AKKA Client", color=1]
    akka_server     [label="AKKA Server (Spark)", color=2]
    spark_master    [label="Spark Master", color=3]
    spark_slave1    [label="Spark Slave", color=4]
    spark_slave2    [label="Spark Slave", color=4]
    spark_slave3    [label="Spark Slave", color=4]
    akka_client -> akka_server -> spark_master -> spark_slave1 [dir=both color=cadetblue]
    spark_master -> spark_slave2 [dir=both color=cadetblue] 
    spark_master -> spark_slave3 [dir=both color=cadetblue]
}

• 運行命令：

C:\Tools\graphviz\bin\dot.exe test.dot -T svg -o test.svg

• 生成以下圖片：

References

• SVG Editor
  Online version: https://svg-edit.github.io/svgedit/releases/svg-edit-2.8.1/svg-editor.html
• SVG Reference
• graphviz