CODEWITHSUNDEEP
htmlcsssvg
rkoller
rkoller

Reputation: 1474

Base64 encoded SVG isn't colorable via an inline style in the HTML markup nor via a class in the CSS

I have a SVG logo i want to place a few times on a single page. Each time it should show up in a different color. That colors are defined via the Wordpress backend. The colors get applied with a snippet like that: 

<div class="logo" style="fill:<?php the_field('op-about-color', 'option'); ?>;"></div>

The SVG is placed in the CSS and is base64 encoded. Inside the <svg>tag i've also included the class logotest. But the problem is the SVG isn't getting colored. I've created an example pen with the base64 encoded svg:

http://codepen.io/rpkoller/pen/DuqBh

It stays black.Opposite to the fact that the inline style filled it red and even the assignment of the fill color green for the sktest class has no effect at all.

If i place an unencoded svg code right into the html into a div everything works as expected. Inline style assignment as well as with the logotest class:

http://codepen.io/rpkoller/pen/rdFup

Is there a way to get things going with the base64 variant? Best regards Ralf

Upvotes: 0

Views: 472

Answers (1)

Michael
Michael

Reputation: 7092

Your problem is in your implementation. It's not necessarily that base64 is the issue so to speak, but the difference between including the image as a CSS background, versus including it in HTML.

In HTML... You literally can read the code of the SVG in the HTML. Because that HTML markup exists in the DOM, it is editable via CSS through your classes. If you were to right click the page and click "View page source" you would see the code of the SVG in the HTML.

In CSS, you are adding the image as a background image. Background images don't get any sort of HTML markup that is outputted into the DOM. It is... an "effect" if you want to say it that way, which is applied to some HTML element that you define. If you right click the page and click "View page source" you will see the element that you are applying the background image to, but there is no additional markup outputted that further CSS could then read and modify.

What are your options? Well, you could apply the inline styling directly to the SVG image, but that isn't in any way dynamic, so you won't be able to do your back-end snippet for class names and such.

The other option is to include the SVG like you have done already, which is called "Inline SVG". This way you can effect it with CSS code.

Upvotes: 1

Related Questions