What attributes should SVG file have, to be read correctly in Processing?

juliahpo

I am trying to load an SVG file (saved from Illustrator) to be visible in Processing. Below is the code I use for this, however, it doesn't work. The SVG file is inside the data folder. Thank you in advance for helping.

PShape logo;

void setup() { size(800, 800); logo = loadShape("logo01.svg"); }

void draw() { background(255); shape(logo); }

koogs

it doesn't work.

how so?

juliahpo

Hi, thanks for respondng. It doesn't work, as it displays an empty window. I tried the same with a JPG image and it loads just fine, so I understand something must be wrong with the format of my SVG file, right?

koogs

can you post the svg file? assuming it's not too large

it should just be xml, you can format it as code (highlight the source, press ctrl-o)

failing that, can you upload it somewhere and link to it?

juliahpo

Thanks, I'm enclosing the code of the svg file below:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http:// www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [
    <!ENTITY ns_extend "http:// ns.adobe.com/Extensibility/1.0/">
    <!ENTITY ns_ai "http:// ns.adobe.com/AdobeIllustrator/10.0/">
    <!ENTITY ns_graphs "http:// ns.adobe.com/Graphs/1.0/">
    <!ENTITY ns_vars "http:// ns.adobe.com/Variables/1.0/">
    <!ENTITY ns_imrep "http:// ns.adobe.com/ImageReplacement/1.0/">
    <!ENTITY ns_sfw "http:// ns.adobe.com/SaveForWeb/1.0/">
    <!ENTITY ns_custom "http:// ns.adobe.com/GenericCustomNamespace/1.0/">
    <!ENTITY ns_adobe_xpath "http:// ns.adobe.com/XPath/1.0/">
]>
<svg version="1.0" id="Warstwa_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
     xmlns="http:// www.w3.org/2000/svg" xmlns:xlink="http:// www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 195 140"
     enable-background="new 0 0 195 140" xml:space="preserve">
<switch>
    <foreignObject requiredExtensions="&ns_ai;" x="0" y="0" width="1" height="1">
        <i:pgfRef  xlink:href="#adobe_illustrator_pgf">
        </i:pgfRef>
    </foreignObject>
    <g i:extraneous="self">
        <g>
            <defs>
                <rect id="SVGID_1_" x="65" y="56.4" width="64" height="41.5"/>
            </defs>
            <clipPath id="SVGID_2_">
                <use xlink:href="#SVGID_1_"  overflow="visible"/>
            </clipPath>
            <path clip-path="url(#SVGID_2_)" fill="#E6007E" d="M66.4,97.9h61.2c0,0,1.4-6.2,1.4-9.5c0-17.7-14.3-32-32-32s-32,14.3-32,32
                C65,91.7,66.4,97.8,66.4,97.9"/>
        </g>
    </g>
</switch>
<i:pgf  id="adobe_illustrator_pgf">
    <![CDATA[
...
]]>
</i:pgf>
</svg>

koogs

there's a lot of illustrator guff in that file. it says it's ignoring the switch tag, which is annoying because everything is inside the switch tag!

this works:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http: //www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [
]>
<svg version="1.0" id="Warstwa_1" xmlns="http: //www.w3.org/2000/svg" xmlns:xlink="http:// www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 195 140"
     enable-background="new 0 0 195 140" xml:space="preserve">
<g>
    <defs>
        <rect id="SVGID_1_" x="65" y="56.4" width="64" height="41.5"/>
    </defs>
    <clipPath id="SVGID_2_">
        <use xlink:href="#SVGID_1_"  overflow="visible"/>
    </clipPath>
    <path clip-path="url(#SVGID_2_)" fill="#E6007E" d="M66.4,97.9h61.2c0,0,1.4-6.2,1.4-9.5c0-17.7-14.3-32-32-32s-32,14.3-32,32
        C65,91.7,66.4,97.8,66.4,97.9"/>
</g>
</svg>

but having to edit out all that stuff every time you modify the file won't be fun.

juliahpo

oh, wow! Thank you for analysing all this. What I don't get is, since this is a simple shape, nothing overly complicated, why the SVG saves itself in a way that complicates all.. I'm not so advanced in Processing, so it's even harder for me to understand all this, but I'll try to edit the code and see whether I can get a hang of it :) Thank you for assisting, I appreciate all your help!

koogs

why the SVG saves itself in a way that complicates all.

adobe illustrator 8)