在博客园的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前要有一个空行。
SVG Sample This 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前要有一个空行。
graphviz: 一个可以通过文本产生图片的工具
- 编辑一个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
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2016-08-26 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
