SVG images don't display?

p5.js Coding Questions
1

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

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

and draw code like

image(swords, 0, 0);

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

<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.

2

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.

3

Hi

This may help

1 Like
4

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’

1 Like