# SVG images don't display?

**URL:** <https://discourse.processing.org/t/svg-images-dont-display/36288>\
**Category:** Coding Questions\
**Created:** [April 12, 2022, 12:03am UTC](https://discourse.processing.org/t/svg-images-dont-display/36288 "2022-04-12T00:03:56Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![bluemoon](https://avatars.discourse-cdn.com/v4/letter/b/bc79bd/32.png) [@bluemoon](https://discourse.processing.org/u/bluemoon)\
**Post date:** [April 12, 2022, 12:03am UTC](https://discourse.processing.org/t/svg-images-dont-display/36288/1 "2022-04-12T00:03:56Z")

</div>

Hey Folks, trying to load some SVGs in the p5js - I’m not getting any errors but the images just don’t display I’m using setup code like

```auto
swords = loadImage('assets/swords/Asset15.svg');

```

and draw code like

```auto
image(swords, 0, 0);

```

And there’s just nothing there. Here’s the SVG file

```auto
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160.09 724">
  <g id="Layer_2" data-name="Layer 2">
        <path d="M101.82,166.48a150.88,150.88,0,0,1,48,14.89" style="fill: none;stroke: #fff;stroke-miterlimit: 10"/>
        <path d="M71.43,165.29a159.23,159.23,0,0,1,16.64-.07" style="fill: none;stroke: #fff;stroke-miterlimit: 10"/>
        <path d="M10.48,181.62a150.85,150.85,0,0,1,47.18-14.94" style="fill: none;stroke: #fff;stroke-miterlimit: 10"/>
        <g>
          <path d="M70.39,39.1q-1.8,59.84-6,119.62" style="fill: none;stroke: #fff;stroke-miterlimit: 10"/>
          <path d="M88.07,39.1q2.09,59.84,7,119.62" style="fill: none;stroke: #fff;stroke-miterlimit: 10"/>
        </g>
        <g>
          <line x1="66.15" y1="170.69" x2="66.15" y2="664.64" style="fill: none;stroke: #fff;stroke-miterlimit: 10"/>
          <line x1="93.3" y1="170.69" x2="93.3" y2="664.64" style="fill: none;stroke: #fff;stroke-miterlimit: 10"/>
          <line x1="68.22" y1="680.15" x2="77.97" y2="713.52" style="fill: none;stroke: #fff;stroke-miterlimit: 10"/>
          <line x1="91.32" y1="680.05" x2="81.85" y2="713.52" style="fill: none;stroke: #fff;stroke-miterlimit: 10"/>
        </g>
        <circle cx="79.72" cy="18.52" r="18.02" style="fill: none;stroke: #fff;stroke-miterlimit: 10"/>
        <path d="M79.72,716.52a3.74,3.74,0,1,0,3.75,3.74A3.75,3.75,0,0,0,79.72,716.52Z" style="fill: #fff"/>
        <path d="M79.72,8.19A10.33,10.33,0,1,0,90.06,18.52,10.34,10.34,0,0,0,79.72,8.19Z" style="fill: #fff"/>
        <path d="M3.74,181.38a3.74,3.74,0,1,0,3.74,3.74A3.74,3.74,0,0,0,3.74,181.38Z" style="fill: #fff"/>
        <path d="M64.4,161.29A3.75,3.75,0,1,0,68.14,165,3.75,3.75,0,0,0,64.4,161.29Z" style="fill: #fff"/>
        <path d="M95.05,161.29A3.75,3.75,0,1,0,98.79,165,3.75,3.75,0,0,0,95.05,161.29Z" style="fill: #fff"/>
        <path d="M66.56,668.83a3.74,3.74,0,1,0,3.74,3.74A3.74,3.74,0,0,0,66.56,668.83Z" style="fill: #fff"/>
        <path d="M92.89,668.83a3.74,3.74,0,1,0,3.74,3.74A3.75,3.75,0,0,0,92.89,668.83Z" style="fill: #fff"/>
        <path d="M156.35,181.38a3.74,3.74,0,1,0,3.74,3.74A3.74,3.74,0,0,0,156.35,181.38Z" style="fill: #fff"/>
  </g>
</svg>

```

Any thoughts? SVGs were made in illustrator.

---

<div class="post-metadata">

**Author:** ![bluemoon](https://avatars.discourse-cdn.com/v4/letter/b/bc79bd/32.png) [@bluemoon](https://discourse.processing.org/u/bluemoon)\
**Post date:** [April 12, 2022, 12:17am UTC](https://discourse.processing.org/t/svg-images-dont-display/36288/2 "2022-04-12T00:17:26Z")

</div>

I could add that I tried with a SVG generated in p5 and it worked fine, so I am guessing it is an issue with the SVG files coming out of illustrator but I’m not sure how to fix it.

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [April 12, 2022, 12:23am UTC](https://discourse.processing.org/t/svg-images-dont-display/36288/3 "2022-04-12T00:23:09Z")

</div>

Hi

This may help

> <https://github.com/processing/p5.js/issues/458>
>
> Students working on a final that makes use of SVGs asked about SVGs and p5. I l…ooked and don't see an issue discussing this so thought I would open one. I noticed there is \[some a commented out \`p5.Shape\` object\](https://github.com/lmccart/p5.js/blob/master/src/objects/p5.Shape.js). Some stream of consciousness questions:
> \- Would it make sense to have a\`createSVG()\` function for creating an SVG DOM element from a file?
> \- Is drawing SVGs to an HTML canvas something that is standard practice on the web or would this never happen and it makes more sense to place SVG DOM elements on top of a canvas with absolute positioning?
> \- Would it makes sense to support a few functions to build an SVG from scratch?
> \- To what extent should we port functionality from \[PShape\](https://processing.org/reference/PShape.html) to \`p5.Shape\`?
> 
> Apologies if this is covered somewhere else and I'm missing something obvious.

---

<div class="post-metadata">

**Author:** ![bluemoon](https://avatars.discourse-cdn.com/v4/letter/b/bc79bd/32.png) [@bluemoon](https://discourse.processing.org/u/bluemoon)\
**Post date:** [April 14, 2022, 12:21am UTC](https://discourse.processing.org/t/svg-images-dont-display/36288/4 "2022-04-14T00:21:48Z")

</div>

I was able to get it working! It had to do with the Illustrator export settings. The SVG files need hard coded widths and heights to work in processing so in the export settings ‘Responsive’ needs to be unchecked and styling needs to be set to ‘Presentation Attributes’