Sharing SVGs - Revision history

Lucatorsera: /* Further Steps */

2026-01-28T15:17:20Z

Further Steps

← Older revision		Revision as of 17:17, 28 January 2026
Line 99:		Line 99:

	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.		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 [https://en.wikipedia.org/wiki/Read%E2%80%93eval%E2%80%93print_loop REPL system] could be used to constantly render the SVG, similarly to livecoding environments.
			* browser terminal sharing sessions: [https://terminal.home.weka.io/ tmate] ([https://terminaltrove.com/tmate/ alternative]) & [https://tsl0922.github.io/ttyd/ ttyd].

	==Results==		==Results==

SHRED: /* Sharing SVGs */

2026-01-27T09:22:59Z

Sharing SVGs

← Older revision		Revision as of 11:22, 27 January 2026
Line 60:		Line 60:
	We made a TMUX session to being able to both edit and save the XML code at the same time.		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:		Here are some funny iterations:<div style="display:flex">

	'''*******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. --- u can also explain the things of how layers works etc*********'''
	<div style="display:flex">
	[[File:Immagine 2026-01-26 214948.png\|left\|frameless\|600x600px]]		[[File:Immagine 2026-01-26 214948.png\|left\|frameless\|600x600px]]

Line 77:		Line 74:

	The xml tags used were <line>, <polygon>, <polyline>, <circle>, <path>.		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:<syntaxhighlight lang="html">		On our last experiment, we dared to animate our svg, using the tag <animateExport> as follows:<syntaxhighlight lang="html">

Lucatorsera: /* Sharing SVGs */

2026-01-26T23:31:04Z

Sharing SVGs

← Older revision		Revision as of 01:31, 27 January 2026
Line 94:		Line 94:
	==== Further Steps ====		==== 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.		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!''		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.

	==Results==		==Results==

Lucatorsera: /* Sharing SVGs */

2026-01-26T23:27:25Z

Sharing SVGs

← Older revision		Revision as of 01:27, 27 January 2026
Line 63:		Line 63:

	'''*******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. --- u can also explain the things of how layers works etc*********'''		'''*******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. --- u can also explain the things of how layers works etc*********'''
			<div style="display:flex">
	[[File:Immagine 2026-01-26 214948.png\|left\|frameless\|600x600px]]		[[File:Immagine 2026-01-26 214948.png\|left\|frameless\|600x600px]]

	[[File:Immagine 2026-01-26 215907.png\|left\|frameless\|600x600px]]		[[File:Immagine 2026-01-26 215907.png\|left\|frameless\|600x600px]]
			</div>
			<div style="display:flex">
	[[File:Immagine 2026-01-26 220916.png\|left\|frameless\|600x600px]]		[[File:Immagine 2026-01-26 220916.png\|left\|frameless\|600x600px]]

	[[File:Immagine 2026-01-26 222318.png\|left\|frameless\|600x600px]]		[[File:Immagine 2026-01-26 222318.png\|left\|frameless\|600x600px]]
			</div>

			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>.

			On our last experiment, we dared to animate our svg, using the tag <animateExport> as follows:<syntaxhighlight lang="html">
			<animateTransform
			attributeName="transform"
			begin="0s"
			dur="10s"
			type="rotate"
			from="0 10 85"
			to="360 100 85"
			repeatCount="indefinite" />
			</syntaxhighlight>
			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 [https://www.w3schools.com/graphics/svg_animation.asp] & [https://www.joshwcomeau.com/svg/friendly-introduction-to-svg/].

	~~'''[~~.~~..]''' We then tried~~ to ~~animate it '''........bla bla bla................~~.~~'''~~		==== 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.

	~~[https://hub.xpub~~.~~nl/sergio/SI29/file-sharing/sharing_svgs/xpub-round4~~.html ~~https://hub.xpub.nl/sergio/SI29/~~file~~-sharing/sharing_svgs/xpub-round3.html]~~		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!''

	https://hub.xpub.nl/sergio/SI29/file-sharing/sharing_svgs/xpub-~~round4~~.html		==Results==
			<div style="display:flex">
			{{Iframe\|src=https://hub.xpub.nl/sergio/SI29/file-sharing/sharing_svgs/xpub-straight3.html\|width=300\|height=200\|style=float:right}} {{Iframe\|src=https://hub.xpub.nl/sergio/SI29/file-sharing/sharing_svgs/xpub-round2.html\|width=300\|height=200\|style=float:left}}
			</div>

	~~For next time, [if possible, meaning if u the tutors will allow us so, instead of going to a completely different prototype] we would~~:		{{Iframe\|src=https://hub.xpub.nl/sergio/SI29/file-sharing/sharing_svgs/xpub-round4.html\|width=1000\|height=1000\|style=float:center}}

	~~'''Luca here u can write what we'd like to go forward with'''~~
	[[Category:SI29]]		[[Category:SI29]]
	[[Category:SI29/Shred]]		[[Category:SI29/Shred]]

SHRED: /* Sharing SVGs */

2026-01-26T22:12:34Z

Sharing SVGs

← Older revision		Revision as of 00:12, 27 January 2026
Line 62:		Line 62:
	Here are some funny iterations:		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.*********'''		'''*******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. --- u can also explain the things of how layers works etc*********'''
	[[File:Immagine 2026-01-26 214948.png\|left\|frameless\|600x600px]]		[[File:Immagine 2026-01-26 214948.png\|left\|frameless\|600x600px]]

SHRED: /* Sharing SVGs */

2026-01-26T22:11:11Z

Sharing SVGs

← Older revision		Revision as of 00:11, 27 January 2026
Line 57:		Line 57:
	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.		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.
	[[File:Xpub-straight base.png\|thumb\|starting point [straight style]]]		[[File:Xpub-straight base.png\|thumb\|starting point [straight style]]]
	[[File:Xpub-round base.png\|none\|thumb\|starting point [~~round~~ style]]]		[[File:Xpub-round base.png\|none\|thumb\|starting point [rounded style]]]
	We made a TMUX session to being able to both edit and save the XML code at the same time.		We made a TMUX session to being able to both edit and save the XML code at the same time.

SHRED: /* Sharing SVGs */

2026-01-26T22:10:26Z

Sharing SVGs

@@ Line 64: / Line 64: @@
 '''*********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.***********'''
 [[File:Immagine 2026-01-26 214948.png|left|frameless|600x600px]]
 [[File:Immagine 2026-01-26 215907.png|left|frameless|600x600px]]
 [[File:Immagine 2026-01-26 220916.png|left|frameless|600x600px]]
 [[File:Immagine 2026-01-26 222318.png|left|frameless|600x600px]]
 '''[...]''' We then tried to animate it '''........bla bla bla.................'''

SHRED: /* Sharing SVGs */

2026-01-26T22:09:29Z

Sharing SVGs

← Older revision		Revision as of 00:09, 27 January 2026
Line 53:		Line 53:
	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.		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 ~~finish: NOTES~~		To connect between Brasil and the Netherlands we first SSH'd into Sergio.

	~~UPLOAD ON 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.
			[[File:Xpub-straight base.png\|thumb\|starting point [straight style]]]
			[[File:Xpub-round base.png\|none\|thumb\|starting point [round style]]]
			We made a TMUX session to being able to both edit and save the XML code at the same time.

	~~EDIT THE HTML FILE ON SERGIO WITH TMUX~~		Here are some funny iterations:

	~~A PY SCRIPT THAT SAVES IT EVERY 5 TO 10 SECONDS~~		'''*******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.*********'''
			[[File:Immagine 2026-01-26 214948.png\|left\|frameless\|600x600px]]

	~~THE FILE HAS TO BE PUBLICLY AVAILABLE ON THE WEB~~

	~~ON TOUCH DESIGNER, USE THE webrendererTOP TO ACCESS THE HTML PAGE AND RENDER THE SVG~~

	~~CONNECT MADMAPPER TO TD~~


Line 71:		Line 72:


			[[File:Immagine 2026-01-26 215907.png\|left\|frameless\|600x600px]]











			[[File:Immagine 2026-01-26 220916.png\|left\|frameless\|600x600px]]







			[[File:Immagine 2026-01-26 222318.png\|left\|frameless\|600x600px]]








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

			[https://hub.xpub.nl/sergio/SI29/file-sharing/sharing_svgs/xpub-round4.html 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'''
	[[Category:SI29]]		[[Category:SI29]]
	[[Category:SI29/Shred]]		[[Category:SI29/Shred]]

SHRED at 12:25, 25 January 2026

2026-01-25T12:25:13Z

← Older revision		Revision as of 14:25, 25 January 2026
Line 52:		Line 52:
	== Sharing SVGs ==		== 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.		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 finish: NOTES

			UPLOAD ON SERGIO

			EDIT THE HTML FILE ON SERGIO WITH TMUX

			A PY SCRIPT THAT SAVES IT EVERY 5 TO 10 SECONDS

			THE FILE HAS TO BE PUBLICLY AVAILABLE ON THE WEB

			ON TOUCH DESIGNER, USE THE webrendererTOP TO ACCESS THE HTML PAGE AND RENDER THE SVG

			CONNECT MADMAPPER TO TD

SHRED: /* The code */

2026-01-25T12:21:58Z

The code

← Older revision		Revision as of 14:21, 25 January 2026
Line 48:		Line 48:
	The laser works by drawing paths, and not by displayin' an image all at once like common beamers.		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.		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 ==		== Sharing SVGs ==