OT: .svg colour from $primary

support
1

Hi there,

on website there are multiple .svg files is there a trick to use $primary colour from style.scss instead of using the standard .svg

fill="#2F2F41"

applying $primary to svg fill does not work by default and I wonder if there is an easy trick to apply the primary colour automatically instead of entering manual colour code to each image

thank you in advance

2

Hello @inder
As per my understanding and experience, you can not control SVG colors from scss if you loads svg as image . but you can change the fill color if you add svg as code . Then use this property to add your custom color .

.icon {
      fill: url(#pattern); 
}
3

Hi @gethugothemes

This does not help as the code you provide is a static code and apply to all icons (hero-graphic-name.svg files does not fell under the .icon class :slight_smile: )

I just want the desired .svg files to fetch from $primary colour code that I have in style.scss. Instead of writing a static # colour code in each .svg file

this way I can apply $primary colour to graphics directly from style.scss and I can extend the no. of graphics the primary colour applies to.

but thanks for taking the time.
Cheers!

4

If you are including the SVG via img-Tag then Hugo can’t help you with this task.

If you are including the SVG inline in the HTML of a layout that is processed by Hugo, then you can define something along the lines of .surroundingclass svg tagname for any tagname inside of the SVG to style it.

SVG files themselfes don’t “fetch” anything from SCSS, as these are unprocessed stylesheets and not available to the SVG file itself, mostly outside of the webroot directory. One is used while creating the website and the other later on, when serving the website.

If you want to CREATE SVG files with hugo, that’s possible via custom output types and in THAT case they might be able to fetch something from the assets directory.

5

I have faced this issue when I build my website.

Yes, it is not possible to directly control SVG fill using colour variables in CSS. That sucks, but there is slight workaround. Put SVG inside DIV and define colour for SVG inside div.

Below is an extract on how I am using it on my website.

:root {
  --facebook-color: #3B5998;
  --static-white: #fff;
}

#share-buttons > div.facebook > svg {height: 2rem; margin-top: 0.5625rem; fill: var(--static-white); background: var(--facebook-color); padding: 0.5rem;}

<div id="share-buttons">
<div class="facebook" title="Facebook" onclick="window.open('https://www.facebook.com/share.php?u={{ $pageurl }}');"><svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1343 12v264h-157q-86 0-116 36t-30 108v189h293l-39 296h-254v759h-306v-759h-255v-296h255v-218q0-186 104-288.5t277-102.5q147 0 228 12z"/></svg></div>
</div>
6

You can control fill via scss/css:

.icon {
   &.instagram svg path {
      fill: #d6249f;
      fill: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
    }
   svg {
    width: 40px;
    height: 40px;
  }
}

As soon as you have the SVG inside of the HTML you have access to all SVG CSS properties.

https://www.w3.org/TR/SVG/propidx.html

7

Yes, that’s the option. But it using static colour where what I understand he want to use variable (for example different on dark theme).

1 Like
8

But hey, you can put that in your SCSS :wink: fill: --somecolor-variablename instead of #d6249f :wink:

9

Hi @idarek

you are right what I am trying to achieve is to use a single theme for multiple websites.

I want to add a $primary colour in scss which can apply to whole website including graphics

Most colours are based on primary colour for example $primary - 10% or $primary +20% etc.

graphics take 3 colours from primary colour , currently I have to manually edit all graphics and icons

But if there was a way to directly input fill="$primary" to all graphics in image folder will be great

fill: --somecolor-variablename

does not work it would have been great if there was a way to apply this this will also work great with light/dark theme

10

fill: --somecolor-variablename does not work for the graphic.svg files in image folder

have you been able to successfully apply it on your project as I might be doing it wrong or missing something

11

That’s what we all are saying the whole time :slight_smile: If you insert an SVG as image source you CAN NOT CONTROL the styling (other than putting the css INSIDE of your SVG file).

It’s really not a Hugo question. Maybe you can find a solution on Stackoverflow.

1 Like
12

Hi @davidsneighbour

there are multiple solutions for .svg fill control I was asking here as Hugo generate html css from what we provide I was wondering if it can also tweak graphics fill: as it export the site based on the primary colour provided in style.scss

I am 90% sure it is not possible in Hugo currently as I search and test alot but again you never know there might be wizard :mage: who already discovered a solution :test_tube:

13

This is how static HTML works. If you write static colour into html file, you cannot expect this to change, unless you use JavaScript or colour is taken from CSS (like in mine example and others).

15

Please keep the discussion on topic. Thanks.

1 Like