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, 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 displayn' an image all at once like common beamers.

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.