====== 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 ==== excitingElectricity Computer Graphic: Balance ==== ==== Import SVG files into SVG.js ==== 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 ↓

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() {{:students:yiler-svg-importer-path-array.png?800|}} === 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

Here's the zip file of the directory if you want to give it a try↓ {{ :students:yiler-svgjs-svg-importer.zip |}} === Result ===