# HTML SVG Loading

**URL:** https://discourse.processing.org/t/html-svg-loading/7531
**Category:** Coding Questions
**Created:** [January 15, 2019, 5:04am UTC](https://discourse.processing.org/t/html-svg-loading/7531 "2019-01-15T05:04:57Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![Thermacon](https://avatars.discourse-cdn.com/v4/letter/t/9de0a6/32.png) [@Thermacon](https://discourse.processing.org/u/Thermacon)
#### Post date: [January 15, 2019, 5:04am UTC](https://discourse.processing.org/t/html-svg-loading/7531/1 "2019-01-15T05:04:57Z")

</div>

I’m not really sure how to explain this, but I’ll give it a shot.

I have a URL that has a SVG file on it, and want to load it in and display it in my project.

Something like:

```auto
PShape costume;
costume = loadShape("https://assets.scratch.mit.edu/internalapi/asset/638caba865e74c287e8424d3cc1230ad.svg/get");

```

The issue is that the URL has the SVG file in the format of a HTML document, and I don’t know If its possible to load it in or not. Is there any way to do this?

**EDIT:** I think it’s actually XML, not 100% sure what that is…

---

<div class="post-metadata">

### Author: ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)
#### Post date: [January 15, 2019, 7:09am UTC](https://discourse.processing.org/t/html-svg-loading/7531/2 "2019-01-15T07:09:00Z")

</div>

> [@Thermacon](#):
>
> [https://assets.scratch.mit.edu/internalapi/asset/638caba865e74c287e8424d3cc1230ad.svg/get](https://assets.scratch.mit.edu/internalapi/asset/638caba865e74c287e8424d3cc1230ad.svg/get)

looks for me like a good SVG  
should not be a problem

but it says here ( RPI / Raspbian / Processing 3.4 / JAVA mode )  
using the  
/example/basics/shape/loaddsiplaySVG/

> Unsupported format: [https://assets.scratch.mit.edu/internalapi/asset/638caba865e74c287e8424d3cc1230ad.svg/get](https://assets.scratch.mit.edu/internalapi/asset/638caba865e74c287e8424d3cc1230ad.svg/get)

here looks better

> **[p5.js Web Editor](https://editor.p5js.org/kll/sketches/ryt19576X)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

but saving the content to a local svg file OK

```auto
PShape bot;

void setup() {
  size(500, 500);
  // bot = loadShape("https://assets.scratch.mit.edu/internalapi/asset/638caba865e74c287e8424d3cc1230ad.svg/get");
  bot = loadShape("data/mitsvg.svg");
} 

void draw() {
  shape(bot, 0, 0);
}

```

 ![2019-01-15_14-32-07_snap](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/1b2d5f5f70b3b1e13beb959acda7c263da809c43.png)

---

<div class="post-metadata">

### Author: ![Thermacon](https://avatars.discourse-cdn.com/v4/letter/t/9de0a6/32.png) [@Thermacon](https://discourse.processing.org/u/Thermacon)
#### Post date: [January 15, 2019, 12:59pm UTC](https://discourse.processing.org/t/html-svg-loading/7531/3 "2019-01-15T12:59:26Z")

</div>

Thank you so much! I’ll be sure to try that.

---

<div class="post-metadata">

### Author: ![Thermacon](https://avatars.discourse-cdn.com/v4/letter/t/9de0a6/32.png) [@Thermacon](https://discourse.processing.org/u/Thermacon)
#### Post date: [January 15, 2019, 1:04pm UTC](https://discourse.processing.org/t/html-svg-loading/7531/4 "2019-01-15T13:04:56Z")

</div>

I was looking at your code, and wondered if there was anyway that the file could be downloaded and saved to the computer all in the project instead of being done manually before hand.

---

<div class="post-metadata">

### Author: ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)
#### Post date: [January 15, 2019, 1:39pm UTC](https://discourse.processing.org/t/html-svg-loading/7531/5 "2019-01-15T13:39:17Z")

</div>

?? that question i not understand

but i did a test and uploaded it to my blog and loaded it from there

```auto
  bot = loadShape("http://kll.engineering-news.org/kllfusion01/downloads/mitsvg.svg");

```

and it works,  
( but i can not be your file server… )

so i think there might be a problem about the

> /get

---

<div class="post-metadata">

### Author: ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [January 21, 2019, 11:43pm UTC](https://discourse.processing.org/t/html-svg-loading/7531/6 "2019-01-21T23:43:19Z")

</div>

> [@Thermacon](#):
>
> anyway that the file could be downloaded and saved to the computer all in the project

Sure – you can use

1. loadXML to get the svg file from a url, then
2. saveXML to save it to your sketch folder, then
3. loadShape to load the local SVG file as a PShape.

> **[loadXML() / Reference](https://processing.org/reference/loadXML_.html)**
>
> Reads the contents of a file or URL and creates an XML object with its values. If a file is specified, it must be located in the sketch's "data" folder. The filename parameter can also be a URL to a f…

> **[saveXML() / Reference](https://processing.org/reference/saveXML_.html)**
>
> Writes the contents of an XML object to a file. By default, this file is saved to the sketch's folder. This folder is opened by selecting "Show Sketch Folder" from the "Sketch" menu. Altern…
