在博客园的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: 一个可以通过文本产生图片的工具

访问: 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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏python成长之路

Pygame常用方法

6095
来自专栏hightopo

基于 HTML5 的电力接线图 SCADA 应用

1533
来自专栏逸鹏说道

Markdown基础(内含:锚点使用,使用HTML,新页面跳转,目录生成)

如果要语法高亮就在```后面加小写语言名,eg:html,css,javascript,python,cs(csharp)等等

56811
来自专栏Google Dart

AngularDart Material Design 选择 顶

可以手动(在模板中)或通过SelectionOptions实例指定选项。 可以通过模板或通过检查选择模型将选项标记为已选择。

1122
来自专栏Jacklin攻城狮

[UIVIew]谈谈对drawRect的理解

2442
来自专栏老马寒门IT

01-老马jQuery教程-jQuery入口函数及选择器

1.什么是jQuery? 1.1 jQuery介绍 jQuery是一个轻型、快速的、小巧的功能丰富的JavaScript类库。本质就是一堆js的函数的组合。对原...

22610
来自专栏mukekeheart的iOS之旅

自定义组合控件的过程

自定义组合控件的过程 1.自定义一个View 一般来说,继承相对布局,或者线性布局 ViewGroup; 2.实现父类的构造方法。一般来说,需要在构造方法里初始...

2678
来自专栏柠檬先生

VUE 入门基础(8)

十,组件  使用组件   注册     可以通过以下这种方式创建一个Vue实例       new Vue({          el: ...

2229
来自专栏前端知识分享

Vue---自定义组件

       组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,...

1842
来自专栏AzMark

Python 学习之 Tkinter「下」

2195

扫码关注云+社区

领取腾讯云代金券