在博客园的markdow编辑器中使用SVG

最新推荐文章于 2025-05-13 22:11:24 发布

转载最新推荐文章于 2025-05-13 22:11:24 发布 · 912 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/steven-yang/p/5689577.html

文章标签：

#大数据 #markdown

本文介绍如何在Markdown编辑器中正确显示SVG图像的方法，包括使用div和table标签的技巧，并介绍了Graphviz这一通过文本生成图像的强大工具及其具体用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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前要有一个空行。

SVG SampleThis is a sample to use SVG in markdown on the website cnblogs.

使用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前要有一个空行。

SVG SampleThis is a sample to use SVG in markdown on the website cnblogs.

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

生成以下图片：

GSpark Cluster + AKKAakka_clientAKKA Clientakka_serverAKKA Server (Spark)akka_client->akka_serverspark_masterSpark Masterakka_server->spark_masterspark_slave1Spark Slavespark_master->spark_slave1spark_slave2Spark Slavespark_master->spark_slave2spark_slave3Spark Slavespark_master->spark_slave3