在博客园的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