Access shape classes of SVG on p5 canvas with CSS

Galoris

Hi,

here's what I'm trying to do: I want to include a svg image in my p5 canvas and change the properties of certain shapes of that svg image using css. The image is basically a tree, featuring a trunk, big leaves and small leaves. In the svg file, I've grouped the corresponding shapes and assigned a class to each group like this:

<g class='tree'> <g class='bigLeaf'> <path style = 'fill:#000000;' d='this is the path of the first leaf ' /> </g> <g class = 'trunk'> <path ... /> </g> </g>

The js. file looks like this:

var canvas; var treeImg; function preload(){ treeImg = loadImage("gfx/tree_simple_css.svg"); } function setup(){ canvas = createCanvas(windowWidth/2,windowHeight/2); canvas.position(windowWidth/4,windowHeight/4); } function draw(){ background('#C7F6F7'); image(treeImg, .5*width, .5*height); }

With css I'd now like to be able to change e.g. the size of the tree with .tree{size: 50%} or hide the big leaves, you get the idea... Ultimately I'd like the sketch to behave responsive, that's why I'm trying to work with css here. This naive approach however doesn't work, instead what would be the best or the right way to do this?

I'd very much appreciate any help on this issue. Cheers!

GoToLoop

1. https://p5js.org/reference/#/p5/createImg
2. https://p5js.org/reference/#/p5.Element/elt
3. http://EduTechWiki.Unige.ch/en/Using_SVG_with_HTML5_tutorial

Galoris

Thank you for the links. I did look through the p5 reference beforehand and also checked out the tutorial, but I'm still not sure how to apply all of this since I'm relatively new to html and css and up til now only have been working with simple p5 only scripts. Since I'm including my p5 main.js into the index.html I don't want to work with svg containers in the index.html file, do I? With createImg I can access e.g. the size of the whole image, but I still don't know how to get down to the classes I set in the svg file itself. I'd be grateful if I could get some kind of instruction or a related example on how this works in principle. Thanks!

GoToLoop

https://Forum.Processing.org/two/discussion/15473/readme-how-to-format-code-and-text

• My experience w/ SVG is practically none. X_X
• And p5.js doesn't have any specialized API to exclusively deal w/ SVG images either. :-&
• On the other hand, Processing Java Mode & its corresponding JS Mode Pjs have loadShape():
  http://ProcessingJS.org/reference/loadShape_/
• p5.js' loadImage() returns a p5.Image object: https://p5js.org/reference/#/p5.Image
• Which is merely a wrapper for an HTMLCanvasElement:
  https://Developer.Mozilla.org/en-US/docs/Web/API/HTMLCanvasElement
• In short, w/ loadImage(), you lose the original ".svg" image. :-SS
• createImg() returns a p5.Element instead: https://p5js.org/reference/#/p5.Element
• W/ HTMLImageElement as its underlying element:
  https://Developer.Mozilla.org/en-US/docs/Web/API/HTMLImageElement
• Accessed by its elt property: https://p5js.org/reference/#/p5.Element/elt
• But I'm suspicious you won't be able to access the internals of an ".svg" file as an HTMLImageElement either. :-<

GoToLoop

According to the article from the 3rd link I've posted, there are 6 ways to include SVG in the HTML page:
http://EduTechWiki.Unige.ch/en/Using_SVG_with_HTML5_tutorial#How_can_I_include_SVG_in_HTML5

But not of all them allows later manipulation of the embedded ".svg" file though. #-o

Among them, the 1s which seem to have edit capability are: L-)

1. http://Tecfa.Unige.ch/guides/svg/ex/html5/html5-with-object.html
2. http://Tecfa.Unige.ch/guides/svg/ex/html5/html5-with-iframe.html
3. http://Tecfa.Unige.ch/guides/svg/ex/html5/svg-import/import-with-svg-image.html

GoToLoop

DISCLAIMER: Not tested. I've never dealt w/ ".svg" before!
The instructions below are just theories. Dunno whether they could actually work! =P~

• Let's say you've chosen tag <object> to load your ".svg" file:

http://EduTechWiki.Unige.ch/en/Using_SVG_with_HTML5_tutorial#Embeding_SVG_in_HTML_5_with_the_object_tag

• You can use p5.js' createElement() for it: https://p5js.org/reference/#/p5/createElement
• Something like this I guess: const svg = createElement('object');
• According to the article's link, you're gonna need to add attributes type, data, width, height and possibly border too. #:-S
• You may use p5.Element::attribute() method for it: https://p5js.org/reference/#/p5.Element/attribute
• For example: svg.attribute('type', 'image/svg+xml').attribute('data', 'gfx/tree_simple_css.svg');.
• The big if is whether such contrivance would trigger the ".svg" file downloading action or not. :-S

Galoris

Thanks for your effort putting all this together. This seems to be more complicated than expected. I couldn't figure out a way to make it work with createElement and its attributes, so I guess I need to do it without p5...

GoToLoop

Yeah, you can move to a more specialized SVG library. Or even try using 1 of them together w/ p5.js:
http://NoeticForce.com/Javascript-libraries-for-svg-animation

Alternatively, as I've already mentioned, Pjs library can deal w/ SVG via its loadShape():
http://ProcessingJS.org/reference/loadShape_/

Although you're most probably gonna need to use Java syntax rather than JS there. ~O)

BtW, here are 2 online examples I've found searching in OpenProcessing.org: :bz

1. https://OpenProcessing.org/sketch/194588
2. https://OpenProcessing.org/sketch/204742

And to get deep in JS' SVG, I've found out this collection of articles: L-) http://SVGDiscovery.com/

Well, good luck! B-)