Sharing SVGs

For SI29 on which the focus is on file sharing, for this 1st prototype out of 5 Ema and Luca focused on sharing SVGs file type between Brazil and the Netherlands.

Luca owns a laser projector. The idea was to share SVGs in a very simple and direct way, to publicly(?) project them.

According to Wikipedia, files can be shared with and transferred between computers and mobile devices via removable media, networks, or the Internet. We focused on which methods of transfer we already have and use, so we opted to use Sergio (our server).

What is an SVG?

Scalable Vector Graphics (SVG) is a type of file that is based on the Extensible Markup Language (XML) file format which is a subset of SGML. Therefore this type of file can be rendered as an HTML. SVG file format is used for 2D images that are defined by mathematical formulas rather than pixels. Thanks to that aspect, SVGs are "infinitely" scalable.

SVG code can be edited, animated, and manipulated. It is also possible to add CSS or JavaScript to also create interactive graphics.

SVGs methods of creations

Vector software

In a vector software such as Adobe Illustrator, once you export an SVG there are a few things to notice.

- First of all, the shape that u draw must be contained in the sheet of paper. Otherwise when exported, the shape will be invisible. Do not worry cause any sheets of paper will be rendered. Apparently the sheet of paper is the basic condition for the shape to actually exists (meaning to actually be exported).

- With the "SVG Code..." button at the bottom u can see the XML code of your SVG, before exporting it. It will be opened in a text editor, allowing you to edit it and save it as you want, where u want.

- The central button with the world icon at the bottom, opens your SVG in an HTML page on your default browser. This also happens before you actually exported your SVG.

- Under the Options tab, by default "Preserve Illustrator Editing Capabilities" is checked. What that does?

The code

As you can see in this image, if you leave Preserve Illustrator Editing Capabilities it will add a LOT of code which will bloat the size of the file. i:aipgf is a tag that corresponds to adobe_illustrator_pgf which is basically the entire Illustrator document and from where the Illustrator editing capabilities comes from.

Since we share SVG without re-opening them in such software, this whole part is useless, and only adds weight to the file size. Cutting that out would reduce the file size from like 400kb to 8kb.

By this discovery, a deep dive in what could be chopped off from the code had to be done.

Therefore, from this first code u see here, u can slim it down up until that point:

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1">
<style type="text/css">
	.st0{fill:#00AEEF;stroke:#000000;}
</style>
<polygon class="st0" points="5.12,8.87 25.38,88.6 163.29,29.13 "/>
</svg>

As you can read, there are LOTS of thing an SVG don't need for it to work.

In addition, since in this prototype we work with a laser projector, the </style> div is also not needed cause it won't be rendered at all by the laser.

The laser works by drawing paths, and not by displayin' an image all at once like common beamers.

The 2nd method of creation of an SVG is writing the code itself, instead of first drawing something with vectors. A much more difficult method since u won't see the output of what you are typing until you save it (there could be methods in which this would be possible like in a live coding environment. Happy to discover how if you know!!), but an interesting method that lies behind the curtain and makes you deal directly with the core of such a file format.

Sharing SVGs

As said, SVGs can be saved and rendered as HTML pages. Uploading them to our server Sergio via SSH was therefore an easy and quick solution for use to use.

To connect between Brasil and the Netherlands we first SSH'd into Sergio.

Our idea was to being able to edit the same file together, and to see what the outcome would be. Since as said SVG is XML code rendered in HTML, in Sergio we first uploaded some 'XPUB' svgs of handmade letters to have a starting point.

starting point [straight style]

starting point [rounded style]

We made a TMUX session to being able to both edit and save the XML code at the same time.

Here are some funny iterations:

The communication happened both in the terminal and through signal. We would add a class or modify some coordinates in the original svg, and then type "ur turn". We tried to make small modifications and save the iterations. After saving the file, we would head to the browser and update the page to see the results.

The xml tags used were <line>, <polygon>, <polyline>, <circle>, <path>.

We found out that the hierarchy of the lines of <tags> is a layer structure.

On our last experiment, we dared to animate our svg, using the tag <animateExport> as follows:

    <animateTransform
      attributeName="transform"
      begin="0s"
      dur="10s"
      type="rotate"
      from="0 10 85"
      to="360 100 85"
      repeatCount="indefinite" />

This rotates the whole svg with anchor points starting at (10,85) and ending at (100, 85) while doing a full 2D rotation!

For the experiments, we mainly used these pages as reference [1] & [2].

Further Steps

Although fun, the TMUX environment is quite limited and laggy between NL and Brasil. It would be interesting if the collaboration was simultaneous instead of sequential, since only one can type at once to produce proper xml code.

We also tried to add hover actions within our html, but we are not so sure how to do it.

We also wanted to figure out how to have an html page in that folder that could compile and display all the other svgs wrapped in html pages that we generated, but we didn't get much further. We did manage to have them in media wiki via the iFrame template. Fun fact, apparently svg display in mediaWiki is broken, but having the svg in an html file works!

Since the file is ultimately .html, ctrl+s can only save the results in the same format. I wouldn't know how to extract or convert it to svg. This makes it harder for a laser display in the end.

Comments from Prototyping class, 27.01.26

From sharing the process, many interesting tips came up:

• Using a multicursor version of TMUX could make the collective writting easier: https://zellij.dev/news/multiplayer-sessions/
• a REPL system could be used to constantly render the SVG, similarly to livecoding environments.
• browser terminal sharing sessions: tmate (alternative) & ttyd.

Results