Having a SVG match the text color

[qntnlq]

Hello everyone,

Probably a noob question. Sorry about that.

I am trying to create an epub from texts found on the internet, and some chapters feature a divider, which I reproduced as an svg.
On Sigil, I can import it and use it as an image but here's the catch : I want to make it the same colour as the text (so that someone who would want to read with a different colour scheme can have a more consistent experience).

I am aware I can use "fill:currentColor", but I can't get things to work how I want them to :

• Either I import the svg as an image, and then the fill doesn't cascade to the svg, and the image stays in black ;

• Either I copy-paste the full svg code in the html file, and things work but my code becomes a nightmare (and it is probably inefficent) ;

• Either I try to use (probably very badly) an href in my <use> with a , but then nothing happens.

Here's the coding situation :

This is quite infuriating and I'm out of ideas...

Hence my question : do you know a way to import an svg that will keep the current Color attribute ?
I feel like the <use> stuff could help but I must misundertand how the element works...

Anyway, thanks in advance, and have a wonderful day !


EDIT : Huh. The imgur link doesn't display the image... Here's the link
https://imgur.com/a/im-so-very-bad-epubing-ilVXkOG

[Quoth]

imgur doesn't work on the forum and doesn't work for loads of users.

Also loads of sites block images not loaded directly, so the "Insert Image" icon tool isn't very useful.

It should work for images on this site:


Go Advanced and attach an image.

There is a box Attach Files. Brings up a window to upload. After it's uploaded the Paper clip icon lets you insert it at current cursor position in the post.



^^ Here is an uploaded image and paper clip applied.

EDIT
Also imgur track people and object to safety script blocking. Their adverts could serve malware

[qntnlq]

Originally Posted by Quoth

Go Advanced and attach an image.

Duly noted ! Thanks a lot !


So here's the picture of my being bad at epubing...

You can see three attempts at displaying the svg divider :

• the first one that displays the svg but with wrong color;

• the second one that does not display anything;

• the third one that displays what I want (modulo some sizing tweaks but I can manage) but makes the code pretty unapproachable

EDIT

Originally Posted by Quoth

Also imgur track people and object to safety script blocking. Their adverts could serve malware

Didn't know that, but I should've figured... Noted again, will not do again

[qntnlq]

Originally Posted by Quoth

Go Advanced and attach an image.

Duly noted ! Thanks a lot !


So here's the picture of my being bad at epubing...

You can see three attempts at displaying the svg divider :

• the first one that displays the svg but with wrong color;

• the second one that does not display anything;

• the third one that displays what I want (modulo some sizing tweaks but I can manage) but makes the code pretty unapproachable

Originally Posted by Quoth

Also imgur track people and object to safety script blocking. Their adverts could serve malware

Heh. Should've figured. Sorry about that. Won't do again

[Turtle91]

Originally Posted by qntnlq

Hello everyone,

Probably a noob question. Sorry about that.

I am trying to create an epub from texts found on the internet, and some chapters feature a divider, which I reproduced as an svg.
On Sigil, I can import it and use it as an image but here's the catch : I want to make it the same colour as the text (so that someone who would want to read with a different colour scheme can have a more consistent experience).

I am aware I can use "fill:currentColor", but I can't get things to work how I want them to :

• Either I import the svg as an image, and then the fill doesn't cascade to the svg, and the image stays in black ;

• Either I copy-paste the full svg code in the html file, and things work but my code becomes a nightmare (and it is probably inefficent) ;

• Either I try to use (probably very badly) an href in my <use> with a , but then nothing happens.

Here's the coding situation :

This is quite infuriating and I'm out of ideas...

Hence my question : do you know a way to import an svg that will keep the current Color attribute ?
I feel like the <use> stuff could help but I must misundertand how the element works...

Anyway, thanks in advance, and have a wonderful day !


EDIT : Huh. The imgur link doesn't display the image... Here's the link
https://imgur.com/a/im-so-very-bad-epubing-ilVXkOG

This was asked just a little bit ago. Check out this thread, post 8, for the solution. Basically you need to create a mask of the svg and set that color in the CSS.

Cheers!

[qntnlq]

Originally Posted by Turtle91

This was asked just a little bit ago. Check out this thread, post 8, for the solution. Basically you need to create a mask of the svg and set that color in the CSS.

Cheers!

You, sir, are my hero.

Thanks a lot.

[Turtle91]

No worries - glad to help! Just remember to test any and all of this on your target device/app to make sure they play nice!

[Quoth]

Originally Posted by Turtle91

No worries - glad to help! Just remember to test any and all of this on your target device/app to make sure they play nice!

If it's just for yourself it's 100% fine. But for distribution simply using a small black image, or better is text.

[Turtle91]

Originally Posted by Quoth

If it's just for yourself it's 100% fine. But for distribution simply using a small black image, or better is text.

The problem with a small black image is when the user selects a dark mode… they won’t be able to see a dark image on a dark background. Text would work fine as it should match the font color. However, if you want something a little more creative than a text symbol, this should work fine.

Do you happen to know any devices/apps that this does NOT work?? If so, perhaps during your target device/app testing you find it doesn’t, you could simply use a @media query or a @supports check to provide a fallback… or JS if you are making ePub3 only.

Cheers!

[Quoth]

I use text.

[Doitsu]

Originally Posted by qntnlq

I want to make it the same colour as the text (so that someone who would want to read with a different colour scheme can have a more consistent experience).

You could also use fleurons as chapter dividers. Since they're glyphs they'll always have the same color as the text. Depending on the fleuron, you might have to embed a font for them, though.

You might even be able to use pseudo elements to automatically add them at the end of a chapter.

Here's an example image from that post:

[JSWolf]

If this is an eBook that's going to be for sale, you want it to be as backwards compatible with ePub2 as possible So don't use pseudo elements. If it's for you and you want ePub3, then have at it.

[Turtle91]

I haven’t had any issues with pseudo-elements in ePub2. Most current devices/apps also don’t have a problem with them… and if your target market still supports old devices/apps then you should simply provide fallback coding:
Eg.
-Here is the old coding
-Here is the new coding

If your device doesn’t support new coding it will automatically ignore it (per the spec) and revert to the old coding…

[JSWolf]

Originally Posted by Turtle91

I haven’t had any issues with pseudo-elements in ePub2. Most current devices/apps also don’t have a problem with them… and if your target market still supports old devices/apps then you should simply provide fallback coding:
Eg.
-Here is the old coding
-Here is the new coding

If your device doesn’t support new coding it will automatically ignore it (per the spec) and revert to the old coding…

The only way to do pseudo coding is to use spans for the fallback So no need to bother with the pseudo coding in the first place.

A Kobo using RMSDK will not work with pseudo coding. So there you go. That's a very good reason not to use code that's not compatible but can use other code that is compatible.

[Turtle91]

Originally Posted by JSWolf

The only way to do pseudo coding is to use spans for the fallback So no need to bother with the pseudo coding in the first place.

Not at all true.

The pseudo-elements he was referring to were something like hr.ChDiv::after or h3::before.... IIRC these took a little longer to get widely adopted, but ::first-line and ::first-letter have been around forever. If kobo doesn't support them then kobo DRASTICALLY needs to update their software.

Originally Posted by JSWolf

A Kobo using RMSDK will not work with pseudo coding. So there you go. That's a very good reason not to use code that's not compatible but can use other code that is compatible.

If the devices in your target market refuse to transition into the 21st century then the fallback coding could be as simple as not displaying the first line in small-caps and instead showing a normal sentence....

for example:
The first paragraph supports pseudo elements.
The second paragraph doesn't and simply falls back to the older styling.



No spans were used in the making of this image...just a simple class (<p class="first">) and pseudo selectors. The paragraphs are otherwise identical.

It's certainly not as pretty, but it is definitely readable. If the user doesn't like the basic look enough, then they can use a different/newer reader.

IF the publisher INSISTS on a "one ePub to rule them all" then this is perfectly acceptable. IF, however, the professional publisher has a different css file for different markets/devices then Bob's your uncle (I miss Hitch!).

You definitely are not required to limit yourself to ePub2 ONLY coding just to accomodate the outdated devices...there are many other options!