# svgElement() identifier **URL:** \ **Category:** Announcements\ **Created:** [6 August 2021 11:59 UTC](https://forum.cabbageaudio.com/t/svgelement-identifier/2778 "2021-08-06T11:59:45Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![rorywalsh](https://forum.cabbageaudio.com/user_avatar/forum.cabbageaudio.com/rorywalsh/32/165_2.png) [@rorywalsh](https://forum.cabbageaudio.com/u/rorywalsh)\ **Post date:** [6 August 2021 11:59 UTC](https://forum.cabbageaudio.com/t/svgelement-identifier/2778/1 "2021-08-06T11:59:45Z")
I’ve added a new `svgElement()` identifier to the image widget. This allows us to draw SVGs to an image from a string. For example, the code below will create this shape: ![Screen Shot 2021-08-06 at 12.44.23](https://forum.cabbageaudio.com/uploads/default/original/2X/b/b7e13cd6d4139da234e39ba437b4f43d536fbe35.png) [svgStar.csd](https://forum.cabbageaudio.com/uploads/short-url/ws1H9JGTPtG6EjajTBNl9MfaHKK.csd) (693 Bytes) ``` instr 1 cabbageSet "image1", "svgElement", {{ }} endin ``` You can pass any number of elements, i.e, rectangles, circles, paths, etc. You do not need to wrap the elements in \ tags. These are automatically appended. Because an SVG elements can contain any number of Cabbage syntax wildcards, and delimiters, it will quickly break the Cabbage preprocessor. So _ **ONLY use this identifier within your Csound code** _! The path elements are really nice, because they let you do things like this: [svgElements.csd](https://forum.cabbageaudio.com/uploads/short-url/oBA7fueemCpAKKFwpxxV5SLZJqr.csd) (3.6 KB) - _This example could be a lot better. If I was doing it again I would create a UDO to generate the envelopes with the components encapsulated, rather than creating the various components in the \ section and pulling them together in my Csound code._ Animations are also possible. All you need to do is keep updating the SVG elements in realtime. But be forewarned that this might cause a spike in your CPU! This is very poorly tested for now, so please let me know if you have any issues with it. ---
**Author:** ![hdale94](https://forum.cabbageaudio.com/user_avatar/forum.cabbageaudio.com/hdale94/32/6371_2.png) [@hdale94](https://forum.cabbageaudio.com/u/hdale94)\ **Post date:** [6 August 2021 14:03 UTC](https://forum.cabbageaudio.com/t/svgelement-identifier/2778/2 "2021-08-06T14:03:32Z")
I’m wondering if you could give a short explanation of the identifiers that are being used to generate vector graphics? ---
**Author:** ![rorywalsh](https://forum.cabbageaudio.com/user_avatar/forum.cabbageaudio.com/rorywalsh/32/165_2.png) [@rorywalsh](https://forum.cabbageaudio.com/u/rorywalsh)\ **Post date:** [6 August 2021 14:07 UTC](https://forum.cabbageaudio.com/t/svgelement-identifier/2778/3 "2021-08-06T14:07:47Z")
The SVG specs are quite well documented. The [w3schools](https://www.w3schools.com/graphics/svg_intro.asp) pages are quite good. This [editor](https://yqnn.github.io/svg-path-editor/) is quite good too for getting your head around the various SVG elements and identifiers. The SVG text is shown on the top left hand side. ---
**Author:** ![Kzz](https://forum.cabbageaudio.com/letter_avatar_proxy/v4/letter/k/b487fb/32.png) [@Kzz](https://forum.cabbageaudio.com/u/Kzz)\ **Post date:** [7 August 2021 04:57 UTC](https://forum.cabbageaudio.com/t/svgelement-identifier/2778/4 "2021-08-07T04:57:04Z")
this looks super promising) ---
**Author:** ![Retornz](https://forum.cabbageaudio.com/user_avatar/forum.cabbageaudio.com/retornz/32/2714_2.png) [@Retornz](https://forum.cabbageaudio.com/u/Retornz)\ **Post date:** [11 August 2021 04:50 UTC](https://forum.cabbageaudio.com/t/svgelement-identifier/2778/5 "2021-08-11T04:50:14Z")
Wow ! Looks really great ! I wonder what is the most efficient to create an envelope visualizer between this and classic Gentable ? At first sight I’d say this new SGVelements looks way more smooth than Gentable. Can’t wait to get my hands on this ! ---
**Author:** ![rorywalsh](https://forum.cabbageaudio.com/user_avatar/forum.cabbageaudio.com/rorywalsh/32/165_2.png) [@rorywalsh](https://forum.cabbageaudio.com/u/rorywalsh)\ **Post date:** [11 August 2021 08:39 UTC](https://forum.cabbageaudio.com/t/svgelement-identifier/2778/6 "2021-08-11T08:39:24Z")
I think I would rather use this than the `gentable` method. It will beat it hands down in terms of customisations. Also, this new method uses an SVG parser that written by some of the best programmers in the world, whereas I wrote the gentable stuff 🤣 I should have said however that the SVG parser doesn’t works for SVG filters, and some of the more complex aspects of the SVG specs. But for basic shapes, paths, strokes, fills, etc, it works just fine. ---
**Author:** ![chronopolis](https://forum.cabbageaudio.com/letter_avatar_proxy/v4/letter/c/c37758/32.png) [@chronopolis](https://forum.cabbageaudio.com/u/chronopolis)\ **Post date:** [11 August 2021 13:34 UTC](https://forum.cabbageaudio.com/t/svgelement-identifier/2778/7 "2021-08-11T13:34:26Z")
Just thinking out loud here. I wonder if there’s a way to add physics/gravity etc… I guess you could do all the math in Csound too…? 🤔 I envision some generative/reactive UIs with elements bouncing around or the user can “throw” them… ---
**Author:** ![rorywalsh](https://forum.cabbageaudio.com/user_avatar/forum.cabbageaudio.com/rorywalsh/32/165_2.png) [@rorywalsh](https://forum.cabbageaudio.com/u/rorywalsh)\ **Post date:** [11 August 2021 13:39 UTC](https://forum.cabbageaudio.com/t/svgelement-identifier/2778/8 "2021-08-11T13:39:02Z")
Have you seen Iain’s Ping Clang example in the `FunAndGames` menu? It’s great fun and adds a level of physics to the scene too. In terms of throwing stuff around the screen, check out the custom [xypad](https://forum-next.cabbageaudio.com/t/xy-not-pad/2593) I creating using only Cabbage and Csound code, i.e, without using an actual xypad. This could also be done with SVGs too, but I think I would still make each component an image that draws a single SVG rather than try to create one mega SVG that renders the entire scene. ---
**Author:** ![chronopolis](https://forum.cabbageaudio.com/letter_avatar_proxy/v4/letter/c/c37758/32.png) [@chronopolis](https://forum.cabbageaudio.com/u/chronopolis)\ **Post date:** [11 August 2021 13:43 UTC](https://forum.cabbageaudio.com/t/svgelement-identifier/2778/9 "2021-08-11T13:43:59Z")
> [@rorywalsh](#): > > Have you seen Iain’s Ping Clang example in the `FunAndGames` menu? Yes! perfect… 😺 ---
**Author:** ![rorywalsh](https://forum.cabbageaudio.com/user_avatar/forum.cabbageaudio.com/rorywalsh/32/165_2.png) [@rorywalsh](https://forum.cabbageaudio.com/u/rorywalsh)\ **Post date:** [11 August 2021 14:37 UTC](https://forum.cabbageaudio.com/t/svgelement-identifier/2778/10 "2021-08-11T14:37:35Z")
It’s a crazy example. I looked at it one evening for about an hour and still couldn’t get my head around it 🤣 ---
**Author:** ![chronopolis](https://forum.cabbageaudio.com/letter_avatar_proxy/v4/letter/c/c37758/32.png) [@chronopolis](https://forum.cabbageaudio.com/u/chronopolis)\ **Post date:** [11 August 2021 14:40 UTC](https://forum.cabbageaudio.com/t/svgelement-identifier/2778/11 "2021-08-11T14:40:45Z")
Are all of the other SVG elements supported? I tried some of the [blending modes](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feBlend#dom_interface) but couldn’t quite get it to do what I want ``` cabbageSet "image", "svgElement", {{ }} ``` ---
**Author:** ![rorywalsh](https://forum.cabbageaudio.com/user_avatar/forum.cabbageaudio.com/rorywalsh/32/165_2.png) [@rorywalsh](https://forum.cabbageaudio.com/u/rorywalsh)\ **Post date:** [11 August 2021 14:43 UTC](https://forum.cabbageaudio.com/t/svgelement-identifier/2778/12 "2021-08-11T14:43:15Z")
> [@chronopolis](#): > > I tried some of the [blending modes](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feBlend#dom_interface) but couldn’t quite get it to do what I want From a few posts ago: > [@rorywalsh](#): > > I should have said however that the SVG parser doesn’t works for SVG filters, and some of the more complex aspects of the SVG specs. But for basic shapes, paths, strokes, fills, etc, it works just fine. ---
**Author:** ![chronopolis](https://forum.cabbageaudio.com/letter_avatar_proxy/v4/letter/c/c37758/32.png) [@chronopolis](https://forum.cabbageaudio.com/u/chronopolis)\ **Post date:** [11 August 2021 14:43 UTC](https://forum.cabbageaudio.com/t/svgelement-identifier/2778/13 "2021-08-11T14:43:47Z")
gotcha - thanks ---
**Author:** ![rorywalsh](https://forum.cabbageaudio.com/user_avatar/forum.cabbageaudio.com/rorywalsh/32/165_2.png) [@rorywalsh](https://forum.cabbageaudio.com/u/rorywalsh)\ **Post date:** [11 August 2021 14:48 UTC](https://forum.cabbageaudio.com/t/svgelement-identifier/2778/14 "2021-08-11T14:48:28Z")
If you find other things let me know. I tried using a `` tag earlier but got caught out. It is supported in later versions of JUCE but not the one Cabbage uses. But I think I can pull in some updates without violating any licensing issues. So if you find some non-filter aspects of the SVG stuff that doesn’t work let me know. ---
**Author:** ![chronopolis](https://forum.cabbageaudio.com/letter_avatar_proxy/v4/letter/c/c37758/32.png) [@chronopolis](https://forum.cabbageaudio.com/u/chronopolis)\ **Post date:** [11 August 2021 15:09 UTC](https://forum.cabbageaudio.com/t/svgelement-identifier/2778/15 "2021-08-11T15:09:49Z")
> [@rorywalsh](#): > > check out the custom [xypad](https://forum-next.cabbageaudio.com/t/xy-not-pad/2593) Back to this - before I try and wrap my head around it - do you think it’s possible to constrain the ball’s bounds to a polygon shape (ie triangle)? I’m feeling really avant-garde w UI design now! 😆 ---
**Author:** ![rorywalsh](https://forum.cabbageaudio.com/user_avatar/forum.cabbageaudio.com/rorywalsh/32/165_2.png) [@rorywalsh](https://forum.cabbageaudio.com/u/rorywalsh)\ **Post date:** [11 August 2021 15:12 UTC](https://forum.cabbageaudio.com/t/svgelement-identifier/2778/16 "2021-08-11T15:12:04Z")
Sure, with a bit of math to figure out if the ball lies within the triangle. ---
**Author:** ![rorywalsh](https://forum.cabbageaudio.com/user_avatar/forum.cabbageaudio.com/rorywalsh/32/165_2.png) [@rorywalsh](https://forum.cabbageaudio.com/u/rorywalsh)\ **Post date:** [11 August 2021 21:44 UTC](https://forum.cabbageaudio.com/t/svgelement-identifier/2778/17 "2021-08-11T21:44:43Z")
@chronopolis, here is a simple example using only SVGs. I grabbed some triangle hit code from [here](http://www.jeffreythompson.org/collision-detection/tri-point.php). [ballAndTriangle.csd](https://forum.cabbageaudio.com/uploads/short-url/q3uqQ4DVrSSzAE5ibadRbXjdXN9.csd) (1.5 KB) If you move the mouse too quick it skips a frame or so. I think it would be better to make the ball an image component on its own. ---
**Author:** ![chronopolis](https://forum.cabbageaudio.com/letter_avatar_proxy/v4/letter/c/c37758/32.png) [@chronopolis](https://forum.cabbageaudio.com/u/chronopolis)\ **Post date:** [12 August 2021 11:53 UTC](https://forum.cabbageaudio.com/t/svgelement-identifier/2778/18 "2021-08-12T11:53:30Z")
Thanks Rory - I’ll try that out! I’m wondering if there’s any potential for tracking mouseover and boundaries on more complex polygons, algorithmically generated or even animated shapes. I know this is probably way beyond the scope of Cabbage’s intentions but I am experimenting with some algorithmically generated UI elements like grids and curved shapes — something visual and interactive that can be coupled to generative audio. I don’t suppose you know of a simple way to pull info on an image (SVG) objects vectors without employing tons of math? ---
**Author:** ![rorywalsh](https://forum.cabbageaudio.com/user_avatar/forum.cabbageaudio.com/rorywalsh/32/165_2.png) [@rorywalsh](https://forum.cabbageaudio.com/u/rorywalsh)\ **Post date:** [12 August 2021 11:59 UTC](https://forum.cabbageaudio.com/t/svgelement-identifier/2778/19 "2021-08-12T11:59:44Z")
> [@chronopolis](#): > > I’m wondering if there’s any potential for tracking mouseover and boundaries on more complex polygons, algorithmically generated or even animated shapes. This could all be done, but not without some serious work. We can track mouseover easy enough by simply querying the CURRENT\_WIDGET channel, but each widget is basically a rectangle. So any kind of complex boundary detection is likely to be difficult. > [@chronopolis](#): > > I don’t suppose you know of a simple way to pull info on vectors without employing tons of math? Do you mean their positional vectors or their path/polygon vectors? You can parse the SVG file for any info you like. And then pass that to an array. Or you can manually take this info and put it into an array. I’ve often thought some 2d/3d positional vector opcodes would be nice. Even simpler operations like distance, magnitude, etc. I was half tempted to write a set of them for Cabbage a while back, but never got around to it. ---
**Author:** ![chronopolis](https://forum.cabbageaudio.com/letter_avatar_proxy/v4/letter/c/c37758/32.png) [@chronopolis](https://forum.cabbageaudio.com/u/chronopolis)\ **Post date:** [12 August 2021 12:40 UTC](https://forum.cabbageaudio.com/t/svgelement-identifier/2778/20 "2021-08-12T12:40:45Z")
> [@rorywalsh](#): > > Do you mean their positional vectors or their path/polygon vectors? You can parse the SVG file for any info you like. And then pass that to an array. Or you can manually take this info and put it into an array. Both I guess. Still, even with that info in an array I think it would take some heavier lifting to delineate the boundaries, right? > I’ve often thought some 2d/3d positional vector opcodes would be nice. Even simpler operations like distance, magnitude, etc. Cool. Curious what an example of that might look like… Sort of related - I assume you are familiar with [Hydra](https://github.com/ojack/hydra)? I was thinking of building a few UDOs for SVGs that emulate its more basic functions like _repeat_, _scale_, _scroll_. [Next page](https://forum.cabbageaudio.com/t/svgelement-identifier/2778.md?page=2)