# Having fun with SVG - playing with light sources

**URL:** <https://discourse.nodered.org/t/having-fun-with-svg-playing-with-light-sources/38346>\
**Category:** Share Your Projects\
**Created:** [1 January 2021 08:28 UTC](https://discourse.nodered.org/t/having-fun-with-svg-playing-with-light-sources/38346 "2021-01-01T08:28:13Z")\
**Posts on this page:** 8\
**Page:** 2

<div class="post-metadata">

**Author:** ![TadyTheFish](https://avatars.discourse-cdn.com/v4/letter/t/839c29/32.png) [@TadyTheFish](https://discourse.nodered.org/u/TadyTheFish)\
**Post date:** [14 December 2022 18:21 UTC](https://discourse.nodered.org/t/having-fun-with-svg-playing-with-light-sources/38346/21 "2022-12-14T18:21:57Z")

</div>

I'm pulling the image from a directory. And now I'm thinking if I did it the correct way?

```auto
<div class="contain-demo">
  <svg width="100%" height="100%" viewBox="0 0 250 150" enable-background="new 0 0 250 250">
    <image id="background" width="100%" height="100%" href="/public/images/snapshot_22-11-2022.svg" fill = "white"/>
  </svg>
</div>

```

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [14 December 2022 20:06 UTC](https://discourse.nodered.org/t/having-fun-with-svg-playing-with-light-sources/38346/22 "2022-12-14T20:06:37Z")

</div>

I think you are using uibuilder? If so, you probably want to load the SVG into the background rather than the foreground but it shouldn't affect the way it looks.

This is from the uibuilder SVG demo:

```auto
        <h2>My House, Ground Floor</h2>
        <div id="floorplan"
            style="position:relative; width:100%; height:50em; background:url(./background.svg);">
            <bulb id="a" :color="isona ? 'red' : 'grey'" :glow="isona" :clickable="false" x="100" y="100"
                @bulbclicked="myClick" title="A: This one does not respond to clicks">
                <desc>Here we use a component slot to insert some more custom svg</desc>
            </bulb>
            <bulb id="b" :color="isonb ? 'red' : 'grey'" :glow="isonb" :clickable="true" x="270" y="120"
                @bulbclicked="myClick" title="B">
                <circle cx="50" cy="50" r="50" />
            </bulb>
            <bulb id="c" :ison="isonc" :clickable="true" x="650" y="120" @bulbclicked="myClick" title="C"></bulb>
            <bulb id="d" :ison="isond" :clickable="true" x="250" y="270" @bulbclicked="myClick"
                :title="'D: ' + (isond ? 'ON' : 'off')"></bulb>
        </div>

```

---

<div class="post-metadata">

**Author:** ![TadyTheFish](https://avatars.discourse-cdn.com/v4/letter/t/839c29/32.png) [@TadyTheFish](https://discourse.nodered.org/u/TadyTheFish)\
**Post date:** [14 December 2022 20:48 UTC](https://discourse.nodered.org/t/having-fun-with-svg-playing-with-light-sources/38346/23 "2022-12-14T20:48:31Z")

</div>

I don't even have UIbuilder installed 🙂

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [14 December 2022 20:50 UTC](https://discourse.nodered.org/t/having-fun-with-svg-playing-with-light-sources/38346/24 "2022-12-14T20:50:36Z")

</div>

Clearly you confused me with your other thread:

> [@Uibuilder + VueJS + SVG = visual IoT floorplan](https://discourse.nodered.org/t/uibuilder-vuejs-svg-visual-iot-floorplan/17461/44):
>
> Thank you. I checked my bootstrap-vue and other packages. Did an update and restart and now it looks much better.

---

<div class="post-metadata">

**Author:** ![TadyTheFish](https://avatars.discourse-cdn.com/v4/letter/t/839c29/32.png) [@TadyTheFish](https://discourse.nodered.org/u/TadyTheFish)\
**Post date:** [14 December 2022 21:02 UTC](https://discourse.nodered.org/t/having-fun-with-svg-playing-with-light-sources/38346/25 "2022-12-14T21:02:03Z")

</div>

Sorry I was searching for a way to make the floorplan and I have confused the threads

---

<div class="post-metadata">

**Author:** ![TadyTheFish](https://avatars.discourse-cdn.com/v4/letter/t/839c29/32.png) [@TadyTheFish](https://discourse.nodered.org/u/TadyTheFish)\
**Post date:** [14 December 2022 22:10 UTC](https://discourse.nodered.org/t/having-fun-with-svg-playing-with-light-sources/38346/26 "2022-12-14T22:10:02Z")

</div>

Found the problem. Stupid me. I used your example for a starting point and I forgot to change the viewBox parameter.

```auto
viewBox="0 0 1280 900"

```

---

<div class="post-metadata">

**Author:** ![TadyTheFish](https://avatars.discourse-cdn.com/v4/letter/t/839c29/32.png) [@TadyTheFish](https://discourse.nodered.org/u/TadyTheFish)\
**Post date:** [23 December 2022 18:05 UTC](https://discourse.nodered.org/t/having-fun-with-svg-playing-with-light-sources/38346/27 "2022-12-23T18:05:55Z")

</div>

I have another question about manipulating SVG images.  
How do I change a color of a rectangle in the image itself?  
For example my image contains a white rectangle

```auto
<rect
                 vector-effect="non-scaling-stroke"
                 style="fill:#fff;"
                 width="118"
                 height="20"
                 x="0"
                 y="-10"
                 class="anchor"
                 transform="matrix(1,0,0,0.8448,0,0)"
                 id="rect11192" />

```

I would like to change the color of fill to red ( style="fill:#f00 )  
Can your node maniplate this inside the SVG image?

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [23 December 2022 20:50 UTC](https://discourse.nodered.org/t/having-fun-with-svg-playing-with-light-sources/38346/28 "2022-12-23T20:50:51Z")

</div>

I think [this](https://github.com/bartbutenaers/node-red-contrib-ui-svg/wiki/Dynamically-change-a-style-attribute-(like-fill-color)) wiki page will solve your question.  
Please start next time a new discussion, because this one is about "light sources" in svg.  
Otherwise it becomes totally unreadable for people that are reading this discussion, to learn here about light sources...

[Previous page](https://discourse.nodered.org/t/having-fun-with-svg-playing-with-light-sources/38346.md?page=1)