CODEWITHSUNDEEP
javascripthtmlsvg
cotton
cotton

Reputation: 51

Can an SVG be imported as an <svg> tag WITHOUT copy-pasting the SVG code?

I have a folder of several SVGs, all of which I'm trying to include in my HTML file.

I'm using the paper.js library to analyze the SVGs, and to my knowledge the only way it works is by using the <svg> tag — so importing the svgs using <object> or <img> won't work.

I'm trying to find a systematic way to do this, so that I won't have to copy-paste all of the SVG code from each individual file (100+).

Do you know if this is possible? Do you have any suggestions for potential alternatives?

Upvotes: 1

Views: 566

Answers (2)

enhzflep
enhzflep

Reputation: 13109

Never played with the paper.js library, so can't confirm if this technique exhibits any wrinkles. Basically, I'd take the same approach mentioned by Jaromanda X, and have the page pull all the images it needs via AJAX. You'll need to add error-checking and ensure the code is robust - I've not even attempted this, merely providing code that will function when all is as expected. I'm serving from localhost and the images are in the same folder as the html file. (Serving from the local file-system fails due to cross-origin requests when retrieving the SVGs)

Update: As kindly pointed out by Robert Longson in a comment below, one manner in which this code has not been hardened and will almost certainly fail, is in the insertion of multiple images with the same id. If images aren't located by their id they code may produce a usable output. However, it will always produce invalid markup whenever the same id appears more than once.

A potential work-around would be to load all of the images into an off-screen collection before processing any of them. You could then check for clashing ids and alter those that repeat already valid ones.

loadSVGS.html

<!DOCTYPE html>
<html>
<head>
<script>
function newEl(tag){return document.createElement(tag);}

window.addEventListener('load', mInit, false);

var filenames = ['blueBomb.svg','cpBob.svg'];

function ajaxGet(url, onLoad, onError)
{
    var ajax = new XMLHttpRequest();
    ajax.onload = function(){onLoad(this);}
    ajax.onerror = function(){console.log("ajax request failed to: "+url);onError(this);}
    ajax.open("GET",url,true);
    ajax.send();
}

function mInit()
{
    filenames.forEach( loadImage );
}

function loadImage(filename)
{
    ajaxGet(filename, onLoaded, onFailed);
}

function onLoaded(ajax)
{
    var div = newEl('div');
    div.innerHTML = ajax.responseText;
    document.body.appendChild(div);
}

function onFailed(ajax)
{
    console.log('bugger!');
}
</script>
<style>
</style>
</head>
<body>
</body>
</html>

Upvotes: 0

Marc
Marc

Reputation: 11633

Are you using Windows, Mac, or Linux?

Assuming Windows, couldn't you just copy all of the contents into a single file? E.g.:

copy *.svg index.html

And then edit index.html so it has <html> and <body> tags, etc.

SVG files are just text, so I think all you need to do is concatenate all of the files.

It's pretty easy in MacOS/Linux too. I think you could just cat them all into a file like this:

cat *.svg > index.html

But perhaps there's a cleaner way.

Upvotes: 1

Related Questions