A Text-Based SVG Editor in JavaScript

The JavaScript program below, when run, will present an interface that allows a user to edit a vector image in SVG format as text, and view the changes to the rendered image as they are made. To see it in action, copy it into an .html file and open that file in a web browser that runs JavaScript.

This doesn’t really provide any real advantage over opening an SVG as a text editor and a web browser, but it does streamline the process somewhat. It also provides a convenient way to present a demonstration SVG that incorporates a lot of the format’s features in one place.

TextSVGEditor.png


<html>
<body>

<div id="divUI">
	<label><b>Text SVG Editor</b></label><br />
	<label>SVG as Text:</label>
	<button onclick="buttonNew_Clicked();">New</button>
	<button onclick="buttonDemo_Clicked();">Demo</button>	
	<br />
	<textarea id="textareaSVGAsText" cols="80" rows="20" onchange="textareaSVGAsText_Changed();">
	</textarea><br />
	<label>Rendered Image:</label><br />
	<div id="divImage"></div>
</div>

<script type="text/javascript">

function buttonDemo_Clicked()
{
	var textareaSVGAsText = document.getElementById("textareaSVGAsText");
	textareaSVGAsText.value = svgDemoAsText();
	textareaSVGAsText_Changed();
}

function svgDemoAsText()
{
	var svgAsTextLines =
	[
		"<?xml version='1.0' encoding='UTF-8' standalone='no'?>",
		"<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'>",
		"<g>",
		"",
		"<line x1='5' y1='90' x2='90' y2='5' stroke='black' stroke-width='4' stroke-linecap='butt'/>",
		"<line x1='10' y1='95' x2='95' y2='10' stroke='black' stroke-width='4' stroke-linecap='square' />",
		"",
		"<radialGradient id='radialGradient0' cx='50%' cy='50%' r='50%' fx='50%' fy='50%'>",
		"	<stop offset='0%' style='stop-color:blue;stop-opacity:1' />",
		"	<stop offset='90%' style='stop-color:blue;stop-opacity:1' />",
		"	<stop offset='100%' style='stop-color:white;stop-opacity:0' />",
		"</radialGradient>",
		"",
		"<rect x='10' y='10' width='80' height='80' fill='url(#radialGradient0)' />",
		"",
		"<linearGradient id='linearGradient0' x1='0%' y1='0%' x2='100%' y2='0%'>",
		"	<stop offset='0%' style='stop-color:red;stop-opacity:1' />",
		"	<stop offset='20%' style='stop-color:orange;stop-opacity:1' />",
		"	<stop offset='40%' style='stop-color:yellow;stop-opacity:1' />",
		"	<stop offset='60%' style='stop-color:green;stop-opacity:1' />",
		"	<stop offset='80%' style='stop-color:blue;stop-opacity:1' />",
		"	<stop offset='100%' style='stop-color:violet;stop-opacity:1' />",
		"</linearGradient>",
		"",
		"<ellipse cx='50' cy='50' rx='50' ry='30' fill='url(#linearGradient0)'/>",
		"",
		"<path fill='blue' stroke='black' d='M 0,0 20,0 20,20 0,20 z '/>",
		"",
		"<circle cx='90' cy='90' r='12' fill='red' stroke='black' />",
		"",
		"<polygon points='10,90 30,90 20,60' fill='green' stroke='none' />",
		"",
		"<path",
		"	style='stroke:#000000;fill:#00ff0080'",
		"	d='M 25,15 25,5 Q 90,10 95,65 M 95,65 100,65 90,75 80,65 85,65 Q 80,20 25,15'",
		"/>",
		"",
		"<text x='0' y='40' fill='black' transform='rotate(30 20,40)'>Texty text text.</text>",
		"",
		"<polyline points='5,5 50,20 50,80 95,95' fill='none' stroke='rgba(0,0,0,.5)' stroke-width='5' stroke-linecap='round' />",
		"",
		"</g>",
		"</svg>"	
	];
	var svgAsText = svgAsTextLines.join("\n");
	return svgAsText;
}

function buttonNew_Clicked()
{
	var textareaSVGAsText = document.getElementById("textareaSVGAsText");
	textareaSVGAsText.value = svgNewAsText();
	textareaSVGAsText_Changed();
}

function svgNewAsText()
{
	var svgAsTextLines =
	[
		"<?xml version='1.0' encoding='UTF-8' standalone='no'?>",
		"<svg xmlns='http://www.w3.org/2000/svg'>",
		"<g>",
		"</g>",
		"</svg>"
	];
	var svgAsText = svgAsTextLines.join("\n");
	return svgAsText;
}

function textareaSVGAsText_Changed()
{
	var textareaSVGAsText = document.getElementById("textareaSVGAsText");
	var svgAsText = textareaSVGAsText.value;
	var svgAsTextEncoded = encodeURIComponent(svgAsText);
	var svgAsDataURL = "data:image/svg+xml," + svgAsTextEncoded;
	var svgAsImgElement = document.createElement("img");
	svgAsImgElement.src = svgAsDataURL;
	var divImage = document.getElementById("divImage");
	divImage.innerHTML = "";
	divImage.appendChild(svgAsImgElement);
}

</script>

</body>
</html>

This entry was posted in Uncategorized and tagged , , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s