Practicing SVG.js

These are the practices and studies I did about SVG.js. It is a graphical tool that could generate SVG elements using Javascript

First, Steve found out that we can put our SVG file inside an embed window (we are using iframe in this case). The id test1 to test4 are like the names of the iframe that has a SVG file inside

The block above is a blank iframe.

The HTML code ↓

<html>
<link rel="stylesheet" href="style.css"></link>
<body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.1.2/svg.min.js'></script>
<script id='myCode' src="test.js"></script>
<iframe id="test1" src='test.svg'> </iframe>
<iframe id="test2" src='test2.svg'> </iframe>
<iframe id="test3" src='test3.svg'> </iframe>
<iframe id="test4" src='test4.svg'></iframe>
</body>
</html>

If you can't get access to the HTML and CSS file:

function makeIframe (id, src){
    let frame = document.createElement("iframe")
    frame.id = id
    frame.src = src
    frame.style.display = "none"
    document.body.appendChild(frame)
    return frame
}
 
//a simple example
let hi = makeIframe("test1", "test.svg")

This is the css file. The second chunk of this code hides the frame of the iframe box, because we only want the SVG element not the box. ☟

html{
background-color:silver;}
 
iframe{
    display:none;
}

This is the javascript code ↓

The explanations are commented in the code

var draw = SVG().addTo('body').size(2000, 2000)
 
//getting the objects in the array that are called G, because the innerHTML is inside the object. innerHTML is the data of the SVG file.
function getAllShapes(svgElement) {
    return draw.children().filter(x => x.type == 'g')
}
 
//This function uses getElementById function to put our test.svg in javascript
function getAllShapesAndSvgs(allIds) {
    let svgArray = []
    let returnArray = []
    svgArray = allIds.map(x => {
        return draw.svg(document.getElementById(x).contentDocument.childNodes[0].innerHTML)
    })
    let allShapes = getAllShapes()
    svgArray.forEach((x, i) => {
        returnArray.push({
            svg: x,
            shapes: allShapes[i].children().move(i * 100, i * 100)
        })
    })
    //allShapes[i].children() are basically path objects in SVG.js, so we could move them by using the .move() method
    console.log("return array:")
    console.log(returnArray)
    returnArray.forEach(e => {
        e.shapes.on("mouseover", function() {
            e.shapes.animate(1,"<>").opacity(0)
        })
    })
    returnArray.forEach(e => {
        e.shapes.on("mouseout", function() {
            e.shapes.animate(1,"<>").opacity(1)
        })
    })
    //we return the returnArray so things could be drawn in SVG.js
    return returnArray
}
 
//this chunk of code used the function above to draw the svg file out
console.log('sdsd')
let loadedSVG;
let allSvgs;
window.addEventListener('load', (event) => {
    let allIds = ['test1', 'test2', 'test3', 'test4'];
    allSvgs = getAllShapesAndSvgs(allIds);
    allSvgs.forEach(x => console.log(x));
});
 
// Code based on: Kirill Shumilov  https://jsfiddle.net/brusher/tgddv9pw/
 
// Everything should be ungrouped. And on the same layer. Object to path. Also
// save as plain SVG.

A short introduction of getElementById function: https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

A documentation about path: https://svgjs.dev/docs/3.0/shape-elements/#svg-path

This is the path properties arrays I found inside one of the objects in returnArray, by using console.log()

innerHTML

When you open a SVG file with a text editor, you can see the innerHTML of the file. Which is what makes all the shapes and positions.

This is the innerHTML of the star above

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   width="210mm"
   height="297mm"
   viewBox="0 0 210 297"
   version="1.1"
   id="svg8">
  <defs
     id="defs2" />
  <metadata
     id="metadata5">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     id="layer1">
    <path
       style="fill:#000000;stroke:none;stroke-width:0.733104;stroke-dashoffset:2.47181;stroke-opacity:0.984314"
       id="path14"
       d="M 161.65752,196.31252 107.97785,159.25568 55.233774,197.63248 73.889,135.12889 21.091672,96.825376 86.300905,95.252877 106.41444,33.203199 l 21.64629,61.531737 65.22818,-0.0453 -51.83109,39.601204 z" />
  </g>
</svg>

Here's the zip file of the directory if you want to give it a try↓

yiler-svgjs-svg-importer.zip

Practicing SVG.js

excitingElectricity Computer Graphic: Balance

Import SVG files into SVG.js

innerHTML

Result

Designing Service