# Problems with SVG Component in 0.7.3 **URL:** \ **Category:** Elements\ **Created:** [April 8, 2025, 7:00pm UTC](https://forums.realmacsoftware.com/t/problems-with-svg-component-in-0-7-3/47080 "2025-04-08T19:00:09Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\ **Post date:** [April 8, 2025, 7:00pm UTC](https://forums.realmacsoftware.com/t/problems-with-svg-component-in-0-7-3/47080/1 "2025-04-08T19:00:09Z")
@dan While I love the idea of the changes to the SVG component, they are however creating a problem. I think there needs to be an option where I can choose to have Elements make the specified updates to the code. I use a lot of SVG images that have very specific coloring built into them and I want them to maintain there appearance. I’m using them as I want the scalability. After the update once I opened my site all of these SVG images are altered. They still appear in the image well with all their colors, but in the editor they are just a color blob. Probably because the colors have been stripped from the file, but I’m not sure. I tried using the fill and stroke settings to reproduce my colors but could not get it to work as it was when designed. Is there a way of adding an SVG and NOT having the colors stripped out? To explain the problem more, look at my avatar on this post. Its is build from a circle filled with red and a path that is stroked in white overlaid on the red. If you strip out the colors and I try to apply a stroke to render the overlaid path it will also stroke the outside of the red circle, not good. Effectively, this means I cannot reproduce this SVG with the current state of the component. ---
**Author:** ![Dean](https://avatars.discourse-cdn.com/v4/letter/d/3be4f8/32.png) [@Dean](https://forums.realmacsoftware.com/u/Dean)\ **Post date:** [April 8, 2025, 8:34pm UTC](https://forums.realmacsoftware.com/t/problems-with-svg-component-in-0-7-3/47080/2 "2025-04-08T20:34:56Z")
I have the same issue. My logo is a 2 colour SVG but since the update it is now just black. not great when it’s company logo. 🤨 Would be good if there was a way to use the original logo or choose to use the new options. ---
**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\ **Post date:** [April 8, 2025, 8:57pm UTC](https://forums.realmacsoftware.com/t/problems-with-svg-component-in-0-7-3/47080/3 "2025-04-08T20:57:13Z")
> [@Dean](#): > > Would be good if there was a way to use the original logo or choose to use the new options. I agree I think there needs to be a way to opt into the optimizations. The biggest problem is that these changes do not take into account SVG ikages with multiple paths, were some of the paths are filled and others are stroked, It just takes a broad brush approach and blows away those distinctions. I have spent the morning trying to see if I can navigate my way around the problems to no avail. So this will delay the launching of one of my sites until we have a solution. ---
**Author:** ![Dean](https://avatars.discourse-cdn.com/v4/letter/d/3be4f8/32.png) [@Dean](https://forums.realmacsoftware.com/u/Dean)\ **Post date:** [April 8, 2025, 9:09pm UTC](https://forums.realmacsoftware.com/t/problems-with-svg-component-in-0-7-3/47080/4 "2025-04-08T21:09:04Z")
![Screenshot 2025-04-08 at 22.06.23](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/7/8/78dbb6a4238dc4f268e1244d6256ba42c356a614.png) Before Update. ![Screenshot 2025-04-08 at 22.02.32](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/f/6/f65b214ec0830ca1594f908488cc6c2a42a2ede2.png) After Update ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [April 8, 2025, 9:18pm UTC](https://forums.realmacsoftware.com/t/problems-with-svg-component-in-0-7-3/47080/5 "2025-04-08T21:18:52Z")
I think @Ben is going to add in an option to disable the “optimisations” for those using more complex multicoloured SVG’s. We’ll try to get a build out tomorrow (Wednesday) with this fix and a few others in! ---
**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\ **Post date:** [April 8, 2025, 9:23pm UTC](https://forums.realmacsoftware.com/t/problems-with-svg-component-in-0-7-3/47080/6 "2025-04-08T21:23:41Z")
@dan That would be really helpful as there is clearly a need for the choice. I would like to add that I’m not knocking these optimizations, for general simple icons and shapes they are ideal. I’m reworking all of mine to work better with them. But we need the more the complex option as well. ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [April 8, 2025, 9:26pm UTC](https://forums.realmacsoftware.com/t/problems-with-svg-component-in-0-7-3/47080/7 "2025-04-08T21:26:10Z")
Yep, totally understood 🫡 ---
**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\ **Post date:** [April 9, 2025, 7:37am UTC](https://forums.realmacsoftware.com/t/problems-with-svg-component-in-0-7-3/47080/8 "2025-04-09T07:37:13Z")
**tl;dr: we’ll add some toggles to the SVG for more flexibility.** * * * This thread is a great example of the inherent challenges with SVGs. While they may appear simple, under the hood they’re just XML-based code - and that brings its own set of quirks, especially when integrating them into component-based system like Elements. Some background for anyone reading that perhaps hasn’t worked much with SVGs previously: Unlike standard HTML elements, SVGs can have deeply nested structures, inline styles, non-standard attribute naming, and even embedded CSS or JavaScript. This makes them far less predictable when trying to apply styling. In many cases, class names don’t propagate as expected, and applying sizing, transforms, or colours can fail silently if the SVG isn’t structured in a compatible way. For example, setting a `fill-red-500` class may have no effect if the fill attribute is hardcoded inline. Because of that, it’s not realistic to expect that we can drop in any arbitrary SVG and have a fully flexible, styled, and responsive component “just work” every time. That’s why a degree of “cleaning up” or normalisation is so needed - for example, we need to like strip out inline styles so the SVG plays nicely with our theming system. Having said all that, I’ll be adding some toggles to enable or disable the changes we introduced in the latest build. Hopefully that offer more flexibility and (fingers crossed) fix the issues raised in this thread 🙂 ---
**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\ **Post date:** [April 9, 2025, 8:56am UTC](https://forums.realmacsoftware.com/t/problems-with-svg-component-in-0-7-3/47080/9 "2025-04-09T08:56:07Z")
Just a quick update, this is what I’m thinking for the SVG component options. Hopefully these options make sense, but let me know if you think I’m missing something or have questions 🙂 ![CleanShot 2025-04-09 at 10.53.24@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/0/d/0d6b6a1b2a1d7476527141522235d60be125dd7e.png) ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [April 9, 2025, 9:11am UTC](https://forums.realmacsoftware.com/t/problems-with-svg-component-in-0-7-3/47080/10 "2025-04-09T09:11:49Z")
Just to add to this, those options will all be on by default. ---
**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\ **Post date:** [April 9, 2025, 10:31am UTC](https://forums.realmacsoftware.com/t/problems-with-svg-component-in-0-7-3/47080/11 "2025-04-09T10:31:03Z")
@ben Assuming your using the same public api? How are you gaining access to the raw svg data? Guessing in hooks.js, but I failed. I could easily get the path to the svg resource, but couldn’t find a way to get the raw data (contents of file)? ---
**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\ **Post date:** [April 9, 2025, 10:46am UTC](https://forums.realmacsoftware.com/t/problems-with-svg-component-in-0-7-3/47080/12 "2025-04-09T10:46:50Z")
> [@Doobox](#): > > Assuming your using the same public api? Yes, everything we do in the built-in components is available to everyone. > [@Doobox](#): > > How are you gaining access to the raw svg data? Guessing in hooks.js, but I failed. Correct, in the hooks.js file I am simply getting the raw SVG string via the `svg.image` property (where `svg` is the ID of your control property) and doing string replacements. ```js const { svg, stripStroke } = rw.props; let cleaned = svg.image; if (stripStroke) { cleaned = cleaned.replace(/stroke-width="[^"]*"/g, ""); } ``` ---
**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\ **Post date:** [April 9, 2025, 11:18am UTC](https://forums.realmacsoftware.com/t/problems-with-svg-component-in-0-7-3/47080/13 "2025-04-09T11:18:16Z")
> [@ben](#): > > `.image;` .image; 🤔 Well I’ll have to give that a whirl when I get a mo, thanks. Expanding on that, does this mean there are counterparts, .text, .data, etc… This isn’t vanilla js as far as I’m aware. Is this Alpine or something? ---
**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\ **Post date:** [April 9, 2025, 2:56pm UTC](https://forums.realmacsoftware.com/t/problems-with-svg-component-in-0-7-3/47080/14 "2025-04-09T14:56:08Z")
Ah ha! I see… ```auto { "UTType": "public.svg-image", "index": 0, "isLast": true, "bytes": 780, "filesize": "780 bytes", "isInternalResource": true, "resourceId": "5B7A34DC-ED1E-4B55-BC94-74B944EC2E4A", "isFolder": false, "path": "resources/copy.svg", "image": "\n \n\n", "format": "svg", "isFirst": true, "rw:isResource": true, "name": "copy.svg" } ``` Just seems to treat everything as an image at the moment. ```auto { "name": "hello.txt", "index": 0, "bytes": 36, "resourceId": "5AD93FDC-44B6-45DB-A209-775CCB1B927F", "filesize": "36 bytes", "isInternalResource": true, "isLast": true, "isFolder": false, "path": "resources/hello.txt", "image": "resources/hello.txt", "format": "txt", "isFirst": true, "UTType": "public.plain-text", "rw:isResource": true } ``` ---
**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\ **Post date:** [April 9, 2025, 3:10pm UTC](https://forums.realmacsoftware.com/t/problems-with-svg-component-in-0-7-3/47080/15 "2025-04-09T15:10:13Z")
this is data coming from the Elements resource field - it’s the data for the Elements resource file dropped in to a resource field. We keep things consistent across all resources for simplicity. So you can get the raw SVG “image” via the `resourceID.image` property. You can’t restrict the resource field to a given set of resource types, yes. So a user can drop any type of resource in to all resource fields at the moment. We need to implement restricted types. Hope that makes sense! ---
**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\ **Post date:** [April 9, 2025, 3:17pm UTC](https://forums.realmacsoftware.com/t/problems-with-svg-component-in-0-7-3/47080/16 "2025-04-09T15:17:31Z")
> [@Doobox](#): > > `"image": "resources/hello.txt",` @ben Yes I get it now, and see the allowed types is not implemented yet. Hopefully when it is, this will return the contents of the file, like it currently does for svg. `"image": "resources/hello.txt",` would be in future: `"data": "Hello world, it's great to be here!",` ---
**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\ **Post date:** [April 9, 2025, 4:06pm UTC](https://forums.realmacsoftware.com/t/problems-with-svg-component-in-0-7-3/47080/17 "2025-04-09T16:06:35Z")
These look great. I’m assuming these changes are non-destructive, so you can change them at anytime without having to replace the resource, correct? ---
**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\ **Post date:** [April 9, 2025, 4:27pm UTC](https://forums.realmacsoftware.com/t/problems-with-svg-component-in-0-7-3/47080/18 "2025-04-09T16:27:33Z")
That’s correct. Turn them on or off whenever you like, the edits are non-destructive 😊 ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [April 9, 2025, 5:27pm UTC](https://forums.realmacsoftware.com/t/problems-with-svg-component-in-0-7-3/47080/19 "2025-04-09T17:27:16Z")
These SVG changes/fixes are [now live in Today’s Build (0.7.4)](https://forums.realmacsoftware.com/t/elements-0-7-4-23453/47091/1). ---
**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\ **Post date:** [April 9, 2025, 6:12pm UTC](https://forums.realmacsoftware.com/t/problems-with-svg-component-in-0-7-3/47080/20 "2025-04-09T18:12:55Z")
Fantastic! [Next page](https://forums.realmacsoftware.com/t/problems-with-svg-component-in-0-7-3/47080.md?page=2)