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 [round 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:

*********Luca i upload the images and u can give a description of what we did in the editing, discovered about svgs and so on. Maybe also on the way we were communicating, not only using TMUX but also Signal.***********

[...] We then tried to animate it ........bla bla bla.................

https://hub.xpub.nl/sergio/SI29/file-sharing/sharing_svgs/xpub-round3.html

https://hub.xpub.nl/sergio/SI29/file-sharing/sharing_svgs/xpub-round4.html

For next time, [if possible, meaning if u the tutors will allow us so, instead of going to a completely different prototype] we would:

Luca here u can write what we'd like to go forward with