Adding SVG

Support
#1

Hi, I am struggling adding SVG’s?

I am using CSS to add SVG logo across the site,
It doesn’t want to scale to width of the column box.
Any help would be appreciated. :smiley:

Thanks

#2

Hey @MolemanProductions,

Were you able to get this sorted?

I have just checked the page that you have linked to the post and the SVG is scaling correctly:

Kindly try to clear your site and browser cache.

#3

Hi Jade,

No Sorry,
The image you are seeing is using SVG text directly in a text element.

The SVG Using CSS is not showing (Should be below text).
I wish to use CSS, so if they decide to change their logo, i can update my CSS to update everything.
One of my thoughts is to create a global elements? (but this can not be achieved?)

#4

Hey @MolemanProductions,

The reason your CSS svg image is not showing up because the Raw Content element has no height, Setting the height will fix the issue. Please replace your code with the following:

.logo {
    background: url(data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xml… 3125-8199 4688-13787 4688z' class='fil3'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A) no-repeat center center;
    width: 100%;
    min-height: 100px;
}

You can also make it a Global Block, please see https://theme.co/apex/forum/t/global-blocks/24723

Hope this helps!

#5

Hey Nabeel,

The CSS still is not working for me, it’s stopped showing in the backened aswell.

However I did get global blocks working :thumbsup:

Im now trying to reference the colours to add CSS to change them?

I was hoping to define class=“White”

.white{
  .fil0{fill:none}
  .fil1{fill:#34454d}
  .fil2{fill:#f761ab}
  .fil3,.fil4{fill:#34454d;fill-rule:nonzero}
  .fil4{fill:#f761ab}
}

Obviously this doesn’t work, but was hoping you would know what I would need to do? :smiley:

Thanks in advance

#6

Hey @MolemanProductions,

Not to sound like a villain here but you’re asking us to fix your custom SVG and related code and that is not part of our product support. This is getting in the line of custom CSS development.

Personally, I might be able to fix that but that might take me hours because I’m not familiar with SVG development. Because the support members vary in skillset, this might take minutes for other staff members but it’s not feasible to notify all of them to fix this as this is not a part of our product and this is outside of our required skillset. The support staff’s focus is to know our products and customizing SVG is regretfully, not a part of it currently.

I’d recommend that you post this in our Peer to Peer Forum to see if other users have experience with this.

I hope you’ll understand. :slight_smile:

#7

Hi Christian_y,

Not at all. I shall pass a query onto the peer to peer forum.
Thanks for all the help thus far, it is very much appreciated :smile:

#8

You are most welcome!
If you need anything else we can help you with, don’t hesitate to open another thread.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.