Develop Reference

Simplify SVG (Vector Graphics) Path

Input is below:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="800pt" height="600pt" viewBox="0 0 800 600">
<g enable-background="new">
<path style="fill:none;stroke-width:0.074;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(50.19989%,50.19989%,50.19989%);stroke-opacity:1;stroke-miterlimit:10;" d="M 110.949219 265.421875 L 109.730469 265.691406 L 108.699219 266.410156 L 108.011719 267.460938 L 107.78125 268.679688 " transform="matrix(1,0,0,-1,0,600)"/>
<path style="fill:none;stroke-width:0.074;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(50.19989%,50.19989%,50.19989%);stroke-opacity:1;stroke-miterlimit:10;" d="M 111.050781 268.679688 L 111.050781 265.421875 " transform="matrix(1,0,0,-1,0,600)"/>
<path style="fill:none;stroke-width:0.074;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(50.19989%,50.19989%,50.19989%);stroke-opacity:1;stroke-miterlimit:10;" d="M 110.949219 268.679688 L 110.949219 265.421875 " transform="matrix(1,0,0,-1,0,600)"/>
</g>
</svg>
Expected Output is below:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="800pt" height="600pt" viewBox="0 0 800 600">
<g enable-background="new">
<path transform="matrix(1,0,0,-1,0,600)" stroke-width="0.074" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke="#929292" d="M 110.95 265.42 L 109.73 265.69 L 108.7 266.41 L 108.01 267.46 L 107.78 268.68 "/>
<path transform="matrix(1,0,0,-1,0,600)" stroke-width="0.074" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke="#929292" d="M 111.05 268.68 L 111.05 265.42 "/>
<path transform="matrix(1,0,0,-1,0,600)" stroke-width="0.074" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke="#929292" d="M 110.95 268.68 L 110.95 265.42 "/>
</g>
</svg>
This is about simplifying and beautifying SVG path. I would like the expected output to have the elements of path transform, stroke-width, stroke-linecap, stroke-linejoin, fill stroke and d (rounded to 2 decimals for simplicity).
I have tried let svg_object_alt=document.querySelector('svg').outerHTML;, to convert svg as a string to be read and I am not sure how to extract all the information from it, to be formatted to the expected output? I would really appreciate any help I can obtain :)
I think that the stroke-colour can just hardcode the code number (#929292) into it instead of using the rgb colour :)

you can use that...
const mySvg_Paths = document.querySelectorAll('#my-svg > g > path');
for ( let attr of mySvg_Paths[2].attributes )
{
console.log(attr.name,'-->\n', attr.value);
}
// or
// console.log( 'outerHTML -->\n', mySvg_Paths[2].outerHTML );
// console.log( 'path.d -->\n', mySvg_Paths[2].getAttribute('d'));
#my-svg {
width : 800pt;
height : 600pt;
background : lightgreen;
}
#my-svg path {
fill : none;
stroke-width : 0.074;
stroke-linecap : round;
stroke-linejoin : round;
stroke : rgb(50.19989%, 50.19989%, 50.19989%);
stroke-opacity : 1;
stroke-miterlimit : 10;
}
<svg id="my-svg" viewBox="0 0 800 600">
<g enable-background="new">
<path
d="M 110.949219 265.421875 L 109.730469 265.691406 L 108.699219 266.410156 L 108.011719 267.460938 L 107.78125 268.679688 "
transform="matrix(1,0,0,-1,0,600)"/>
<path
d="M 111.050781 268.679688 L 111.050781 265.421875 "
transform="matrix(1,0,0,-1,0,600)" />
<path
style="fill:none;stroke-width:0.074;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(50.19989%,50.19989%,50.19989%);stroke-opacity:1;stroke-miterlimit:10;"
d="M 110.949219 268.679688 L 110.949219 265.421875 "
transform="matrix(1,0,0,-1,0,600)"/>
</g>
</svg>
then, you can have a look to -> Use RegEx to parse a string with complicated delimiting
specialy this function:
function parseData(pathData)
{
var pieces = pathData.match(/([a-z]+[-.,\d ]*)/gi), i;
/* now parse each piece into its own array */
for (i=0; i<pieces.length; i++)
pieces[i] = pieces[i].match(/([a-z]+|-?[.\d]*\d)/gi);
return pieces;
}

SVG: Select by class, html with javascript jQuery

Years back, Dan Miller had the same problem, as I have now, as they wanted a function (JavaScript) to get SVG elements by class. Dan proposed a function, but users were unable to run it:
function getSvgElemByClass(svgRoot,classSearchStr) {
// modification of Dustin Diaz's find by class script - http://www.dustindiaz.com/getelementsbyclass/
return(
function getSvgElementsByClass(searchClass,node,tag) {
var classElements = new Array();
if ( node == null )
node = document;
if ( tag == null )
tag = '*';
// SVG = XML, so we need the XML method:
// using 'magic' namespace variable provided by websvg (svgns)
var els = node.getElementsByTagNameNS(svgns,tag);
var elsLen = els.length;
var pattern = new RegExp('(^|\\\\s)'+searchClass+'(\\\\s|$)');
for (i = 0, j = 0; i < elsLen; i++) {
// SVG specific helper
if(els[i].hasAttribute('class') &&
pattern.test(els[i].getAttribute('class')) ) {
classElements[j] = els[i];
j++;
} else if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
}
)(classSearchStr,svgRoot)
}
An .svg file could look like this:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
id="svg1024" viewBox="0 0 20 20" width="20" height="20">
<style id="style_css_sheet" type="text/css">
.land
{
fill: #00ff00;
stroke-width: 0.2;
stroke: #e0e0e0;
}
.aa, .ab
{
fill: #ff0000;
}
</style>
<g class="land bg"
id="A">
<path d="M 0,5 H 5 V 0 H 0 Z"
id="aa" class="land er bg"/>
<path d="m 10,5 h 5 V 0 h -5 z"
id="ab" class="land er bg"/>
<path d="m 5,5 h 5 V 0 H 5 Z"
id="ac" class="land tt bg"/>
</g>
<path d="M 0,10 H 5 v -5 H 0 Z"
id="ba" class="land er au"/>
<path d="m 10,10 h 5 v -5 h -5 z"
id="bb" class="land tt au"/>
<path d="m 5,10 h 5 v -5 H 5 Z"
id="bc" class="land er au"/>
<path d="M 0,15 H 5 V 10 H 0 Z"
id="ca" class="land tt bg"/>
<path d="m 10,15 h 5 V 10 h -5 z"
id="cb" class="land tt au"/>
<path d="m 5,15 h 5 V 10 H 5 Z"
id="cc" class="land er bg"/>
</svg>
From html I would like to select by class, like select all class "tt", or select all class "au". Tried with the script of Dan Miller, tried to fix it, but could not do it.
I would like to override the values set in the svg. (change .land {fill: #00ff00;})
I use this script
https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.5/svg.js
So that I can draw by id. That works, if I remove the .land{...}:
var element = SVG.get('fi');
element.fill('#f06')
How could I select by class? What to do, so that I can leave default colouring (.land{...})?

Simply use jQuery to change the fill by class:
$('.land').css('fill', '#0000ff')
Working Codepen.

You mention jQuery in your title, but later just Javascript.
jQuery is not required. Modern browsers have the document.getElementsByClassName() method.
var tt = document.getElementsByClassName("tt");
Array.from(tt).forEach(function(item) {
item.style.fill = "#0000ff";
});
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
id="svg1024" viewBox="0 0 20 20" width="20" height="20">
<style id="style_css_sheet" type="text/css">
.land
{
fill: #00ff00;
stroke-width: 0.2;
stroke: #e0e0e0;
}
.aa, .ab
{
fill: #ff0000;
}
</style>
<g class="land bg"
id="A">
<path d="M 0,5 H 5 V 0 H 0 Z"
id="aa" class="land er bg"/>
<path d="m 10,5 h 5 V 0 h -5 z"
id="ab" class="land er bg"/>
<path d="m 5,5 h 5 V 0 H 5 Z"
id="ac" class="land tt bg"/>
</g>
<path d="M 0,10 H 5 v -5 H 0 Z"
id="ba" class="land er au"/>
<path d="m 10,10 h 5 v -5 h -5 z"
id="bb" class="land tt au"/>
<path d="m 5,10 h 5 v -5 H 5 Z"
id="bc" class="land er au"/>
<path d="M 0,15 H 5 V 10 H 0 Z"
id="ca" class="land tt bg"/>
<path d="m 10,15 h 5 V 10 h -5 z"
id="cb" class="land tt au"/>
<path d="m 5,15 h 5 V 10 H 5 Z"
id="cc" class="land er bg"/>
</svg>

SVG: dynamically created <use> won't show [duplicate]

One of the use elements is created dynamically, one is created statically. I have written a jsfiddle.
https://jsfiddle.net/rhedin/r0dbf6uy/6/
<!doctype html>
<body>
<svg
id="svg_box"
width="200px"
height="100px"
viewBox="0 0 200 100"
style="background-color:pink"
>
<defs>
<g id="b">
<path d="m 4.23,7.7400001 0,-7.14000002 C 4.23,0.18000008 3.96,7.6293944e-8 3.39,7.6293944e-8 l -2.22,0 C 0.39000002,7.6293944e-8 1.9073486e-8,0.36000008 1.9073486e-8,1.0500001 c 0,0.75 0.420000000926514,1.02 1.349999980926514,1.02 0.21,0 0.45,0.03 0.66,0.03 L 2.01,17.1 c -0.12,0 -0.21,0 -0.3,0 C 0.51000002,17.1 1.9073486e-8,17.28 1.9073486e-8,18.12 1.9073486e-8,18.81 0.39000002,19.17 1.17,19.17 l 2.67,0 c 0.45,0 0.6,-0.24 0.6,-0.75 l 0,-1.17 c 0.99,1.47 2.52,2.19 4.56,2.19 3.93,0 6.93,-3.09 6.93,-6.9 0,-3.8699999 -2.94,-6.8999999 -6.87,-6.8999999 -2.07,0 -3.72,0.72 -4.83,2.1 z M 8.79,17.13 c -2.73,0 -4.62,-1.98 -4.62,-4.68 0,-2.7299999 1.92,-4.6799999 4.62,-4.6799999 2.73,0 4.62,2.01 4.62,4.6799999 0,2.79 -1.89,4.68 -4.62,4.68 z" />
</g>
</defs>
<use x="130px" y="10px" xlink:href="#b" />
</svg>
<script>
var svgElt = document.getElementById('svg_box');
var newUse = document.createElementNS("http://www.w3.org/2000/svg", 'use');
newUse.setAttribute('x', '150px');
newUse.setAttribute('y', '10px');
newUse.setAttribute('xlink:href', '#b');
svgElt.appendChild(newUse);
</script>
</body>
Two both appear the same in Chrome's debugger. Why does only one show up?
Thanks, Rick

You can't set an xlink:href attribute using setAttribute, you need to use setAttributeNS
var svgElt = document.getElementById('svg_box');
var newUse = document.createElementNS("http://www.w3.org/2000/svg", 'use');
newUse.setAttribute('x', '150px');
newUse.setAttribute('y', '10px');
newUse.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#b');
svgElt.appendChild(newUse);
<!doctype html>
<body>
<svg
id="svg_box"
width="200px"
height="100px"
viewBox="0 0 200 100"
style="background-color:pink"
>
<defs>
<g id="b">
<path d="m 4.23,7.7400001 0,-7.14000002 C 4.23,0.18000008 3.96,7.6293944e-8 3.39,7.6293944e-8 l -2.22,0 C 0.39000002,7.6293944e-8 1.9073486e-8,0.36000008 1.9073486e-8,1.0500001 c 0,0.75 0.420000000926514,1.02 1.349999980926514,1.02 0.21,0 0.45,0.03 0.66,0.03 L 2.01,17.1 c -0.12,0 -0.21,0 -0.3,0 C 0.51000002,17.1 1.9073486e-8,17.28 1.9073486e-8,18.12 1.9073486e-8,18.81 0.39000002,19.17 1.17,19.17 l 2.67,0 c 0.45,0 0.6,-0.24 0.6,-0.75 l 0,-1.17 c 0.99,1.47 2.52,2.19 4.56,2.19 3.93,0 6.93,-3.09 6.93,-6.9 0,-3.8699999 -2.94,-6.8999999 -6.87,-6.8999999 -2.07,0 -3.72,0.72 -4.83,2.1 z M 8.79,17.13 c -2.73,0 -4.62,-1.98 -4.62,-4.68 0,-2.7299999 1.92,-4.6799999 4.62,-4.6799999 2.73,0 4.62,2.01 4.62,4.6799999 0,2.79 -1.89,4.68 -4.62,4.68 z" />
</g>
</defs>
<use x="130px" y="10px" xlink:href="#b" />
</svg>
</body>

SVG Patch is not cleared

Thanks for advance,
i have used the below code with (MoveTo Lineto),
<svg height="200" width="500">
<path fill='none' stroke-width="30" stroke="black" d="M 100 63.125 L 254 63.125 L 254 117.5 L 418 117.5"/>
</svg>
it's shown fine but when i use same with(MoveTo Lineto MoveTo)
<svg height="200" width="500">
<path fill='none' stroke-width="30" stroke="black" d="M 100 63.125 L 254 63.125 L 254 117.5 M 254 117.5 L 418 117.5">
</svg>
.5 pixel is vary check the attached image.
Why that difference? and how to solve?
Sample:
http://jsfiddle.net/3t8rspd1/1/

Please minus the half the stroke width from x position.
you will get the correct path.
eg. if stroke width is 20 mean minus the 10 from second MoveTo.
calculation 254-(storkeWidth/2) = 244. if strokeWidth is 20.
<svg height="200" width="500">
<path fill='none' stroke-width="20" stroke="black" d="M 100 63.125 L 254 63.125 L 254 117.5 M 244 117.5 L 418 117.5"/>
</svg>
Fiddle

stroke-linejoin
<svg height="200" width="500">
<path fill='none' stroke-width="30" stroke-linejoin="round" stroke="black" d="M 100 63.125 L 254 63.125 L 254 117.5 L 418 117.5"/>
</svg>

Parse SVG and add it to a svg element

I have a service where I want to dynamically add SVG parts to a g element. This is what the service returns:
<g xmlns="http://www.w3.org/2000/svg" style="pointer-events: all;" opacity="1">
<title style="pointer-events: inherit;">Layer 1</title>
<path id="svg_1" style="pointer-events: inherit;" fill="none" stroke="#000000" stroke-width="5" d="M 231.5 122.5 C 230.5 122.5 221.666 124.214 214.5 125.5 C 201.667 127.803 184.514 129.581 173.5 131.5 C 167.508 132.544 164.077 131.928 158.5 136.5 C 155.219 139.19 152 144.469 151.5 156.5 C 151.375 159.497 150.696 163.582 151.5 167.5 C 153.031 174.96 161.804 180.205 170.5 189.5 C 177.762 197.263 185.013 204.954 192.5 212.5 C 200.981 221.048 208.5 226.5 214.5 232.5 C 219.5 237.5 224.834 240.27 227.5 244.5 C 230.219 248.814 230.986 251.324 231.5 253.5 C 231.96 255.447 231.5 258.5 231.5 260.5 C 231.5 262.5 228.786 265.712 226.5 268.5 C 224.707 270.687 221.213 274.151 217.5 277.5 C 213.17 281.405 207.5 283.5 203.5 285.5 C 199.5 287.5 195.676 289.986 193.5 290.5 C 190.58 291.189 188.5 292.5 187.5 292.5 L 186.5 292.5 L 186.5 293.5" />
<path id="svg_2" style="pointer-events: inherit;" fill="none" stroke="#000000" stroke-width="5" d="M 39.5 35.5 C 40.5 35.5 42.5 35.5 45.5 35.5 C 47.5 35.5 50.5 35.5 52.5 35.5 C 54.5 35.5 56.5 35.5 57.5 35.5 L 58.5 35.5 L 59.5 35.5" />
<path id="svg_3" style="pointer-events: inherit;" fill="none" stroke="#000000" stroke-width="5" d="M 40.5 95.5 C 40.5 97.5 39.8088 103.572 38.5 108.5 C 36.8767 114.613 35.5 117.5 35.5 119.5 C 35.5 121.5 34.5 122.5 34.5 123.5 L 33.5 123.5 L 33.5 124.5 L 33.5 125.5" />
<path id="svg_6" style="pointer-events: inherit;" fill="none" stroke="#000000" stroke-width="5" d="M 81.5 176.5" /><path id="svg_7" style="pointer-events: inherit;" fill="none" stroke="#000000" stroke-width="5" d="M 79.5 167.5 C 79.5 170.5 80.1835 178.521 79.5 189.5 C 78.999 197.547 76.9069 204.357 75.5 211.5 C 73.75 220.385 72.663 227.522 71.5 235.5 C 70.6226 241.519 70.5 245.5 70.5 247.5 C 70.5 249.5 70.5 250.5 69.5 250.5 L 69.5 251.5 L 69.5 252.5" />
</g>
The code I'm trying to use which has been modified many times is something to the affect of this:
function parseSVG(s, layer) {
var div= $(s);
for(var i = 0; i < div.children.length; i++) {
layer.append(div.children[i]);
}
}
layer is the g element s is the svg from above. The closest I can get is adding title then all the path elements at once inside of svg_1.

You can use DOMParser to parse an XML string.
var parser = new DOMParser();
var doc = parser.parseFromString(stringContainingXMLSource, "image/svg+xml");
The <g> in your example will be doc.documentElement

In addition to Robert's answer, you can convert the HTMLCollection to SVGElement in this way :
const yourSvgElement = doc.getElementsByTagNameNS("http://www.w3.org/2000/svg", "svg").item(0);
// yourSvgElement is now a SVGElement type
Please note that the converted element is the first in the collection.
See : HTMLCollection.item