# SOLVED: SVG width/height inherits default styling

**URL:** <https://forum.bricksbuilder.io/t/solved-svg-width-height-inherits-default-styling/4821>\
**Category:** Bugs\
**Created:** [August 4, 2022, 9:28pm UTC](https://forum.bricksbuilder.io/t/solved-svg-width-height-inherits-default-styling/4821 "2022-08-04T21:28:14Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![sunny](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/sunny/32/3575_2.png) [@sunny](https://forum.bricksbuilder.io/u/sunny)\
**Post date:** [August 4, 2022, 9:28pm UTC](https://forum.bricksbuilder.io/t/solved-svg-width-height-inherits-default-styling/4821/1 "2022-08-04T21:28:14Z")

</div>

**Bricks Version** : 1.5 RC

Not sure if this is related to [WIP: SVG's all shrunk](https://forum.bricksbuilder.io/t/wip-svgs-all-shrunk/4646), but setting a width & height in a class on an SVG element doesn’t do anything. It inherits the default styling:

![image](https://forum.bricksbuilder.io/uploads/default/original/2X/5/500b710f390f7ad80739e36286c98fbfd520b2cf.png)

---

<div class="post-metadata">

**Author:** ![Sridhar](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/sridhar/32/22855_2.png) [@Sridhar](https://forum.bricksbuilder.io/u/Sridhar)\
**Post date:** [August 5, 2022, 7:03am UTC](https://forum.bricksbuilder.io/t/solved-svg-width-height-inherits-default-styling/4821/2 "2022-08-05T07:03:34Z")

</div>

Hi Sunny,

Is this when using the SVG element? If so, works fine for me.

 ![CleanShot 2022-08-05 at 17.02.19@2x](https://forum.bricksbuilder.io/uploads/default/original/2X/c/c3053330fbf21bb4d5de2420120de7f9228ae94d.png)

Can you provide more info as to how to re-create the problem?

---

<div class="post-metadata">

**Author:** ![sunny](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/sunny/32/3575_2.png) [@sunny](https://forum.bricksbuilder.io/u/sunny)\
**Post date:** [August 5, 2022, 2:34pm UTC](https://forum.bricksbuilder.io/t/solved-svg-width-height-inherits-default-styling/4821/3 "2022-08-05T14:34:48Z")

</div>

Oh weird. Yeah this was for an SVG element and on a fresh install, so I figured it was pretty straightforward. I’ll see if there’s any specific step to reproduce.

---

<div class="post-metadata">

**Author:** ![sunny](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/sunny/32/3575_2.png) [@sunny](https://forum.bricksbuilder.io/u/sunny)\
**Post date:** [August 5, 2022, 2:37pm UTC](https://forum.bricksbuilder.io/t/solved-svg-width-height-inherits-default-styling/4821/4 "2022-08-05T14:37:58Z")

</div>

Actually, it looks like it must’ve been related, as the problem fixed itself in RC2.

 ![image](https://forum.bricksbuilder.io/uploads/default/original/2X/b/bc6ee9dd5926e19c58e1a855ace167b03f543004.png)

---

<div class="post-metadata">

**Author:** ![thomas](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/thomas/32/3_2.png) [@thomas](https://forum.bricksbuilder.io/u/thomas)\
**Post date:** [August 5, 2022, 3:49pm UTC](https://forum.bricksbuilder.io/t/solved-svg-width-height-inherits-default-styling/4821/5 "2022-08-05T15:49:35Z")

</div>

> [@sunny](#):
>
> Actually, it looks like it must’ve been related, as the problem fixed itself in RC2.

With all due respect, I fixed it 😜

---

<div class="post-metadata">

**Author:** ![sunny](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/sunny/32/3575_2.png) [@sunny](https://forum.bricksbuilder.io/u/sunny)\
**Post date:** [August 5, 2022, 3:51pm UTC](https://forum.bricksbuilder.io/t/solved-svg-width-height-inherits-default-styling/4821/6 "2022-08-05T15:51:45Z")

</div>

You mean problems don’t just fix themselves?? Thought that’s how software dev worked 🤯

---

<div class="post-metadata">

**Author:** ![thomas](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/thomas/32/3_2.png) [@thomas](https://forum.bricksbuilder.io/u/thomas)\
**Post date:** [August 5, 2022, 3:57pm UTC](https://forum.bricksbuilder.io/t/solved-svg-width-height-inherits-default-styling/4821/7 "2022-08-05T15:57:18Z")

</div>

Hehe, if we reach that level, then you better fasten your seatbelt 🚀

---

<div class="post-metadata">

**Author:** ![yankiara](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/yankiara/32/2114_2.png) [@yankiara](https://forum.bricksbuilder.io/u/yankiara)\
**Post date:** [August 17, 2022, 9:58pm UTC](https://forum.bricksbuilder.io/t/solved-svg-width-height-inherits-default-styling/4821/8 "2022-08-17T21:58:51Z")

</div>

Hi,

I actually don’t understand this rule:

```auto
[class*=brxe-] svg {
    height: inherit;
    width: inherit;
}

```

IMHO it is insanely invasive, since (almost) EVERYTHING is nested inside a brxe-something.  
This rule is actually almost equivalent to:

```auto
svg {
    height: inherit;
    width: inherit;
}

```

Does it look right to you to interfere so much with a standard tag?

In fact it breaks all my custom SVGs ☹  
For instance, I have inline SVGs – copied/pasted from some source or automatically generated by custom tools – with custom sizes and this rule takes precedence.

 ![image](https://forum.bricksbuilder.io/uploads/default/original/2X/1/154cd138752e426f0411b3647d5cfab476ae6e99.png)

---

<div class="post-metadata">

**Author:** ![yankiara](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/yankiara/32/2114_2.png) [@yankiara](https://forum.bricksbuilder.io/u/yankiara)\
**Post date:** [August 26, 2022, 9:05am UTC](https://forum.bricksbuilder.io/t/solved-svg-width-height-inherits-default-styling/4821/9 "2022-08-26T09:05:51Z")

</div>

@thomas , any thought on this, please?

---

<div class="post-metadata">

**Author:** ![thomas](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/thomas/32/3_2.png) [@thomas](https://forum.bricksbuilder.io/u/thomas)\
**Post date:** [August 29, 2022, 9:03am UTC](https://forum.bricksbuilder.io/t/solved-svg-width-height-inherits-default-styling/4821/10 "2022-08-29T09:03:30Z")

</div>

@yankiara We can make sure to only apply this rule (starting at 1.5.1) to svg tags that don’t have a `width` and `height` attribute, but it is needed for multiple elements that contain an “Icon” control and where the CSS selector is not the svg itself, but the parent node.

---

<div class="post-metadata">

**Author:** ![omega](https://forum.bricksbuilder.io/letter_avatar_proxy/v4/letter/o/a6a055/32.png) [@omega](https://forum.bricksbuilder.io/u/omega)\
**Post date:** [August 29, 2022, 10:58am UTC](https://forum.bricksbuilder.io/t/solved-svg-width-height-inherits-default-styling/4821/11 "2022-08-29T10:58:40Z")

</div>

@thomas Is 1.5.1 beta coming today?

---

<div class="post-metadata">

**Author:** ![yankiara](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/yankiara/32/2114_2.png) [@yankiara](https://forum.bricksbuilder.io/u/yankiara)\
**Post date:** [August 29, 2022, 3:36pm UTC](https://forum.bricksbuilder.io/t/solved-svg-width-height-inherits-default-styling/4821/12 "2022-08-29T15:36:55Z")

</div>

Then, couldn’t you use more specific selectors like `.brxe-element-slug > svg` ?

`[class*=brxe-] svg` is WAAAAAY too general, it targets ALL SVGs inside sections or containers, etc.