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.
<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>
Programming for the Beginner (on Amazon)
github.com/thiscouldbebetter
This Could Be Better 