# How to share SVG files?

**URL:** <https://forum.graphviz.org/t/how-to-share-svg-files/101>\
**Category:** Help\
**Created:** [May 15, 2020, 12:30am UTC](https://forum.graphviz.org/t/how-to-share-svg-files/101 "2020-05-15T00:30:06Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![steveroush](https://avatars.discourse-cdn.com/v4/letter/s/a9adbd/32.png) [@steveroush](https://forum.graphviz.org/u/steveroush)\
**Post date:** [May 15, 2020, 12:30am UTC](https://forum.graphviz.org/t/how-to-share-svg-files/101/1 "2020-05-15T00:30:06Z")

</div>

Is there a (free) service that will allow me to upload SVG files (with embedded javascript) and then link to them. Most (like this forum) won’t serve “anonymous” SVG or won’t serve SVG with javascript. (honest, I’m trustworthy)

---

<div class="post-metadata">

**Author:** ![magjac](https://sea2.discourse-cdn.com/graphviz/user_avatar/forum.graphviz.org/magjac/32/16_2.png) [@magjac](https://forum.graphviz.org/u/magjac)\
**Post date:** [May 15, 2020, 2:30pm UTC](https://forum.graphviz.org/t/how-to-share-svg-files/101/2 "2020-05-15T14:30:18Z")

</div>

Do you mean to just share a link to a page containing the SVG or do you want to embed the uploaded SVG here on the forum?

Not sure what you mean by “anonymous” or if it’s important.

---

<div class="post-metadata">

**Author:** ![steveroush](https://avatars.discourse-cdn.com/v4/letter/s/a9adbd/32.png) [@steveroush](https://forum.graphviz.org/u/steveroush)\
**Post date:** [May 15, 2020, 3:52pm UTC](https://forum.graphviz.org/t/how-to-share-svg-files/101/3 "2020-05-15T15:52:05Z")

</div>

Sorry, I wasn’t clear. I’ll try again. Most file sharing/forum/blog sites (including this one) won’t upload and serve SVG files. (I assume for security reasons).  
In this forum I want to demo 2 or 3 animated dot/layers files in SVG format. If I just include the SVG text, the reader has to cut & paste to create the .svg file and then open it with a browser. Also SVG files get big quickly.  
I’d prefer to just include links in this forum so the reader could just click and see the result.  
(I hope this is clearer - and forget anonymous)  
thanks

---

<div class="post-metadata">

**Author:** ![magjac](https://sea2.discourse-cdn.com/graphviz/user_avatar/forum.graphviz.org/magjac/32/16_2.png) [@magjac](https://forum.graphviz.org/u/magjac)\
**Post date:** [May 16, 2020, 8:10am UTC](https://forum.graphviz.org/t/how-to-share-svg-files/101/4 "2020-05-16T08:10:28Z")

</div>

Provided that I have understood what you _really_ want to do I think I have a much, much better solution than what you are asking for, but I will answer your question as its posed first.

I think you can use the services I mentioned. Here are example that I have made:

> <https://gist.github.com/magjac/4acffdb3afbc4f71b448a210b5060bca>

> <https://gist.github.com/magjac/69dc955a2e2ee085f60369c4a73f92a6>

> <https://gist.github.com/magjac/28a70231e2c9dddb84b3b20f450a215f>

> <https://gist.github.com/magjac/f485e7b915c9699aa181a11e183f8237>
>
> There are more than three files. show original

> **[d3-graphviz](https://observablehq.com/@magjac/d3-graphviz)**
>
> Functions for rendering Graphviz graphs and performing animated transitions between them. adot \\\`import {adot} from "@magjac/d3-graphviz"\\\` Animated DOT through the adot template literal tag Basic form: The basic form renders a static graph just like...

> **[Introduction to d3-graphviz](https://observablehq.com/@magjac/introduction-to-d3-graphviz)**
>
> A Javascript library for interactive DOT graphs with animated transitions Presentation held at the Data Visualization Stockholm Meetup, June 29 2018 What is this? This Observable notebook is a presentation aimed at introducing d3-graphviz to people...

> **[Demo of d3-graphviz Animations](https://observablehq.com/@magjac/demo-of-d3-graphviz-animations)**
>
> A quick demo of Graphviz animations using d3-graphviz natively Using d3-graphviz((https://github.com/magjac/d3-graphviz) natively gives access to the full functionality and configurability. For simpler cases, consider using the adot template literal...

> **[Placing Graphviz nodes in fixed positions](https://observablehq.com/@magjac/placing-graphviz-nodes-in-fixed-positions)**
>
> An interactive notebook implemented with d3-graphviz. Abstract The Graphviz pos attribute is mainly used in DOT output, but the neato and fdp layout engines support it also on input. This notebook lets you play with it and see it's effect (and...

Now on to something much better that I have been working on. It’s not officially deployed yet because I haven’t finished writing the user documentation and have some final testing left, but you can start using the basic functionality anyway if you bear in mind that it’s still a beta.

In you post, you can write:

```auto
[dot verbose=true]
digraph {
  a -> b
}
[/dot]
[dot]
digraph {
  a -> b
  a -> c
}
[/dot]
```

which will give you:

[dot verbose=true]  
digraph {  
a → b  
}  
[/dot]  
[dot]  
digraph {  
a → b  
a → c  
}  
[/dot]

If you want to preserve whitespace in the displayed DOT source, you can write:

````auto
[dot verbose=true]
```
digraph {
  a -> b
}
```
[/dot]
[dot]
```
digraph {
  a -> b
  a -> c
}
```
[/dot]
````

which will give you:

[dot verbose=true]

```auto
digraph {
  a -> b
}

```

[/dot]  
[dot]

```auto
digraph {
  a -> b
  a -> c
}

```

[/dot]

If you don’t want to show the DOT source code, you can remove the `verbose` option.

---

<div class="post-metadata">

**Author:** ![steveroush](https://avatars.discourse-cdn.com/v4/letter/s/a9adbd/32.png) [@steveroush](https://forum.graphviz.org/u/steveroush)\
**Post date:** [May 16, 2020, 8:35pm UTC](https://forum.graphviz.org/t/how-to-share-svg-files/101/5 "2020-05-16T20:35:00Z")

</div>

- Cool - On a quick glance, **[bl.ocks.org](http://bl.ocks.org)** and **github/gist** look like what I want. I’ll start reading & playing.

- Cool - **d3-graphviz** looks quite cool.

- Dang - For a moment, I hoped **d3-graphviz** already included the feature I’m going to propose, but after a quick look, I think not. (The best code is that which is written by someone else) Time will tell

thanks

---

<div class="post-metadata">

**Author:** ![magjac](https://sea2.discourse-cdn.com/graphviz/user_avatar/forum.graphviz.org/magjac/32/16_2.png) [@magjac](https://forum.graphviz.org/u/magjac)\
**Post date:** [May 17, 2020, 7:57am UTC](https://forum.graphviz.org/t/how-to-share-svg-files/101/6 "2020-05-17T07:57:09Z")

</div>

Then I don’t think I understand what you want. If you describe it in more detail, maybe I can add it to d3-graphviz.

---

<div class="post-metadata">

**Author:** ![magjac](https://sea2.discourse-cdn.com/graphviz/user_avatar/forum.graphviz.org/magjac/32/16_2.png) [@magjac](https://forum.graphviz.org/u/magjac)\
**Post date:** [May 17, 2020, 9:17am UTC](https://forum.graphviz.org/t/how-to-share-svg-files/101/7 "2020-05-17T09:17:39Z")

</div>

I’ve looked at your question again. Perhaps the little word `layers` is the key? I’ve done some research on [layers/overlays](https://www.graphviz.org/faq/#FaqOverlays). I guess you want to use the Graphviz [layers](https://www.graphviz.org/doc/info/attrs.html#d:layers) attribute to define the different graphs to do animated transitions between. I wasn’t really aware of this possibility even though I’ve seen this attribute scroll past my eyes many time while reading about other attributes.

I think it should be doable to implement this in [d3-graphviz](https://github.com/magjac/d3-graphviz), but I think I need to see what your embedded JavaScript code does before I can say for sure. The tricky thing is mostly not to implement a certain functionality, but how to define a sensible way for users to control it.

As a reference, here’s the example from the FAQ and what is rendered from it today:  
[dot verbose=true]

```auto
digraph G {
	layers="local:pvt:test:new:ofc";

	node1 [layer="pvt"];
	node2 [layer="all"];
	node3 [layer="pvt:ofc"]; /* pvt, test, new, and ofc */
	node2 -> node3 [layer="pvt:all"];	/* same as pvt:ofc */
	node2 -> node4 [layer=3]; /* same as test */
}

```

[/dot]  
Not what you would expect perhaps? If you look in the console log, you can see that d3-graphviz even throws errors for it.

Likewise if you try to open it in the [Graphviz Visual Editor](http://magjac.com/graphviz-visual-editor/?dot=digraph%20G%20%7B%0A%09layers%3D%22local%3Apvt%3Atest%3Anew%3Aofc%22%3B%0A%0A%09node1%20%20%5Blayer%3D%22pvt%22%5D%3B%0A%09node2%20%20%5Blayer%3D%22all%22%5D%3B%0A%09node3%20%20%5Blayer%3D%22pvt%3Aofc%22%5D%3B%09%09%2F%2A%20pvt%2C%20test%2C%20new%2C%20and%20ofc%20%2A%2F%0A%09node2%20-%3E%20node3%20%20%5Blayer%3D%22pvt%3Aall%22%5D%3B%09%2F%2A%20same%20as%20pvt%3Aofc%20%2A%2F%0A%09node2%20-%3E%20node4%20%5Blayer%3D3%5D%3B%09%09%2F%2A%20same%20as%20test%20%2A%2F%0A%7D%0A).

---

<div class="post-metadata">

**Author:** ![steveroush](https://avatars.discourse-cdn.com/v4/letter/s/a9adbd/32.png) [@steveroush](https://forum.graphviz.org/u/steveroush)\
**Post date:** [May 17, 2020, 9:00pm UTC](https://forum.graphviz.org/t/how-to-share-svg-files/101/8 "2020-05-17T21:00:41Z")

</div>

I received help (thanks **magjac** ), so I will move over to **show-and-tell** and continue the conversation about **layers**.

---

<div class="post-metadata">

**Author:** ![magjac](https://sea2.discourse-cdn.com/graphviz/user_avatar/forum.graphviz.org/magjac/32/16_2.png) [@magjac](https://forum.graphviz.org/u/magjac)\
**Post date:** [May 17, 2020, 9:06pm UTC](https://forum.graphviz.org/t/how-to-share-svg-files/101/9 "2020-05-17T21:06:39Z")

</div>

Very interesting. I’m looking forward to seeing it 😁

---

<div class="post-metadata">

**Author:** ![legitTorUser](https://avatars.discourse-cdn.com/v4/letter/l/b487fb/32.png) [@legitTorUser](https://forum.graphviz.org/u/legitTorUser)\
**Post date:** [July 7, 2020, 4:07pm UTC](https://forum.graphviz.org/t/how-to-share-svg-files/101/10 "2020-07-07T16:07:55Z")

</div>

You mentioned wanting to be anonymous. The problem with [bl.ocks.org](http://bl.ocks.org) is that it’s a CloudFlare site, which means they mistreat Tor users (iow, anonymous users).

I’ve struggled with publicly posting SVG files as well. The problem is that SVG files can contain javascript (which IMO is a poor design decision on the part of SVG inventors). J/s can be malicious so most websites block SVG files. Otherwise you could put a LAN port scanner inside of an SVG file. (btw, eBay port scans the LAN of all their users when they run eBay’s javascript).

We need someone to invent SSVG (secure SVG) which doesn’t allow javascript, then there would be more sites willing to host vector graphics submitted by the public.
