# SVG cells in Pluto

**URL:** <https://discourse.julialang.org/t/svg-cells-in-pluto/87524>\
**Category:** Pluto\
**Tags:** pluto, svg\
**Created:** [September 20, 2022, 2:58pm UTC](https://discourse.julialang.org/t/svg-cells-in-pluto/87524 "2022-09-20T14:58:30Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![forestacorn](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/forestacorn/32/19260_2.png) [@forestacorn](https://discourse.julialang.org/u/forestacorn)\
**Post date:** [September 20, 2022, 2:58pm UTC](https://discourse.julialang.org/t/svg-cells-in-pluto/87524/1 "2022-09-20T14:58:30Z")

</div>

After a bit of experimental exploring I discovered partly by accident that you can have SVG cells in Pluto. Here is some example text for a Pluto cell to illustrate what I mean:

```julia
html"""
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
"""

```

Of course this implies it is an `html` cell which includes `svg` code.  
`html` is needed in place of `md` as otherwise `md` would just display the `svg` text.

❓ May be I have not looked in the right places but I have not seen this documented, so may be I am missing a more correct or better alternative way of displaying SVG?

My motivation for this is that I sometimes like to make ‘_back of the envelope or napkin_’ type sketches and diagrams of what I am trying to do programmatically, which would more ideally be done with a stylus on a tablet computer running an SVG editor app, then the SVG code could be copied into the Pluto cell to include illustrations in the Pluto notebook.

_(The SVG code above is from [w3schools](https://www.w3schools.com/graphics/svg_intro.asp))_

---

<div class="post-metadata">

**Author:** ![kuhrmann](https://avatars.discourse-cdn.com/v4/letter/k/ce7236/32.png) [@kuhrmann](https://discourse.julialang.org/u/kuhrmann)\
**Post date:** [July 31, 2025, 11:38am UTC](https://discourse.julialang.org/t/svg-cells-in-pluto/87524/2 "2025-07-31T11:38:09Z")

</div>

Update for all future finders of this post:

To open and show an SVG, HTML(s) works well:

```julia-auto
begin
	f = open("file.svg", "r")
	s = read(f, String)
	HTML(s)
end

```

If you use PlutoUI instead, you can also do right click, open in new tab:

```julia-auto
using PlutoUI

begin
	f = open("file.svg", "r")
	s = read(f, String)
	Show(MIME"image/svg+xml"(), s)
end

```

---

<div class="post-metadata">

**Author:** ![fonsp](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/fonsp/32/222349_2.png) [@fonsp](https://discourse.julialang.org/u/fonsp)\
**Post date:** [August 18, 2025, 11:01am UTC](https://discourse.julialang.org/t/svg-cells-in-pluto/87524/3 "2025-08-18T11:01:04Z")

</div>

Exactly! A bit nicer is to use `read` directly, so that the file handler is closed:

```julia
begin
	s = read("file.svg", String)
	Show(MIME"image/svg+xml"(), s)
end

```

You can also use `PlutoUI.LocalResource` for this:

```julia
PlutoUI.LocalResource("file.svg")

```

Read the full documentation about images in Pluto here: [🖼️ Images — Pluto.jl](https://plutojl.org/en/docs/images/)