Custom svg files don't render

made a post about this a couple days ago but i couldn’t get the actual data past the spam filter so i’m trying again. i can’t get any custom made svgs to render in processing. test ones i download from the internet work but if i make something in inkscape etc it complies but doesn’t show up on screen.

here’s the svg code

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="42.068748mm"
   height="53.445831mm"
   viewBox="0 0 42.068748 53.445831"
   version="1.1"
   id="svg8"
   inkscape:version="1.0.1 (c497b03c, 2020-09-10)"
   sodipodi:docname="image.svg">
  <defs
     id="defs2" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="1.4910463"
     inkscape:cx="46.544022"
     inkscape:cy="134.10939"
     inkscape:document-units="mm"
     inkscape:current-layer="layer1"
     inkscape:document-rotation="0"
     showgrid="false"
     inkscape:window-width="1252"
     inkscape:window-height="855"
     inkscape:window-x="0"
     inkscape:window-y="23"
     inkscape:window-maximized="0" />
  <metadata
     id="metadata5">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(1.1698889e-5)">
    <g
       data-paper-data="{&quot;isPaintingLayer&quot;:true}"
       fill="none"
       fill-rule="nonzero"
       stroke="none"
       stroke-width="0"
       stroke-linecap="butt"
       stroke-linejoin="miter"
       stroke-miterlimit="10"
       stroke-dasharray="none"
       stroke-dashoffset="0"
       font-family="none"
       font-weight="none"
       font-size="none"
       text-anchor="none"
       style="mix-blend-mode:normal"
       id="g24"
       transform="matrix(2.6458333,0,0,2.6458333,-614.40661,-437.62083)">
      <path
         d="m 234.35667,185.6 v -12 h 12 v 12 z"
         data-paper-data="{&quot;origPos&quot;:null}"
         fill="#d1bc74"
         id="path10" />
      <path
         d="m 234.35917,178.68218 v -3.77134 h 11.95167 v 3.77134 z"
         data-paper-data="{&quot;origPos&quot;:null}"
         fill="#b8a567"
         id="path12" />
      <path
         d="m 236.21667,171.9 v -6.5 l 8,1.8 0.1,4.7 z"
         data-paper-data="{&quot;origPos&quot;:null}"
         fill="#494229"
         id="path14" />
      <path
         d="m 244.61667,176.3 c 0.49706,0 0.9,0.94021 0.9,2.1 0,1.1598 -0.40295,2.1 -0.9,2.1 -0.49706,0 -0.9,-0.94021 -0.9,-2.1 0,-1.1598 0.40295,-2.1 0.9,-2.1 z"
         data-paper-data="{&quot;origPos&quot;:null}"
         fill="#494229"
         id="path16" />
      <path
         d="m 240.81667,176.4 c 0.49706,0 0.9,0.94021 0.9,2.1 0,1.1598 -0.40295,2.1 -0.9,2.1 -0.49705,0 -0.9,-0.94021 -0.9,-2.1 0,-1.1598 0.40294,-2.1 0.9,-2.1 z"
         data-paper-data="{&quot;origPos&quot;:null}"
         fill="#494229"
         id="path18" />
      <path
         d="m 237.3072,169.3812 c 0.90622,2.03286 1.01829,3.95835 0.25032,4.3007 -0.76797,0.34235 -2.12517,-1.02808 -3.03138,-3.06094 -0.90621,-2.03286 -1.01828,-3.95835 -0.25032,-4.30069 0.76797,-0.34235 2.12517,1.02808 3.03138,3.06094 z"
         data-paper-data="{&quot;origRot&quot;:0,&quot;origPos&quot;:null}"
         fill="#3d9698"
         id="path20" />
      <path
         d="m 232.21667,175.1 v -3.5 h 15.9 v 3.5 z"
         data-paper-data="{&quot;origPos&quot;:null}"
         fill="#574e31"
         id="path22" />
    </g>
  </g>
</svg>

if it helps, here’s the test code i’m running

PShape boy;
PShape logo;
void setup(){
  size(1000,1000);
  boy = loadShape("boy.svg");
  logo = loadShape("logo-full.svg");
}
void draw(){
  background(255);
  
  if(mousePressed){
    
    //downloaded from the internet
    shape(logo,mouseX-50,mouseY-50,100,100);
  
  } else {
    
    //exported from inkscape
    shape(boy,mouseX-50,mouseY-50,100,100);
  
  }
}

don’t know anything about svg formatting so i’m lost, any feedback is helpful!

Hi @canslp
You need to edit the SVG file with an editor like Notepad++ (I recommend), and take out line 57 where it reads "fill=“none”. You can also use the function logo.disableStyle(); and fill the shape with your own colors.

2 Likes

does this file not have any color data? if i export an svg from inkscape or something is there a way to do it where it will preserve that informaion? or do i have to color the files manually

wait that actually fully worked. thanks so much, that’s really weird. i wonder what i’m doing that’s making it export like this