How to customize svg images?

Please post all questions and comments regarding Help & Manual 7 here.

Moderators: Alexander Halser, Tim Green

Post Reply
User avatar
Anna Ryut
Posts: 23
Joined: Thu Feb 02, 2017 10:02 am

How to customize svg images?

Unread post by Anna Ryut »

I have several variants of the published webhelp. They all have absolutely different styles, but since the project is the only one, they have common pictures and screenshots.
To avoid making several builds for pictures I wanted to change some .PNG pictures to .SVG format in order to change at least their colors during the publishing of the projects. I added several svg images to my project, assigned them HTML Class and added the property to this class in CSS of the template. But when the project was published, the color of the svg picture remained the same. What did I do wrong? How to customize the CSS for svg images?
User avatar
Tim Green
Site Admin
Posts: 23156
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: How to customize svg images?

Unread post by Tim Green »

Hi Anna,

You can't just apply CSS formatting to any SVG image. It would be great if it were possible, but it's not that easy, unfortunately. In addition to that, even when you do set up your SVG for CSS use, browsers are often a problem. I've frequently seen SVG + CSS tutorials with demos online, where the demos don't work in current browsers. If you Google SVG and CSS you'll find lots of tutorials and you'll need to spend quite a lot of time studying them and experimenting.

Tip: The only reliable way I've found to apply CSS to SVG is to have the SVG code inline inside the HTML document itself, rather than loading the SVG from a file.
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
User avatar
Anna Ryut
Posts: 23
Joined: Thu Feb 02, 2017 10:02 am

Re: How to customize svg images?

Unread post by Anna Ryut »

Ok, I see.

One more question: is it possible to edit the hover of the picture hotspot or it has some default color that cannot be edited? If it is possible, where to change hover properties: in the templates or somewhere in the project?
User avatar
Tim Green
Site Admin
Posts: 23156
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: How to customize svg images?

Unread post by Tim Green »

Anna Ryut wrote:One more question: is it possible to edit the hover of the picture hotspot or it has some default color that cannot be edited? If it is possible, where to change hover properties: in the templates or somewhere in the project?
This is easy to change in pretty much any way you like. You just need to add some CSS to the page template in your output skin to reset the the standard CSS for hotspots used by Help+Manual. This is the standard CSS in the topic content CSS that you need to override:

Code: Select all

/* CSS for responsive image maps */

.hmImageMap a.hmHotspotRect { display:block; position:absolute; border: 1px solid transparent; background:#000; opacity:0.01; filter:alpha(opacity=1)  }
.hmImageMap a.hmHotspotEllipse { display:block; position:absolute; border-radius:50%; border: 1px solid transparent; background:#000; opacity:0.01; filter:alpha(opacity=1) }
.hmImageMap:hover a.hmHotspotRect {opacity:0.3; filter:alpha(opacity=30); }
.hmImageMap:hover a.hmHotspotEllipse { opacity:0.3; filter:alpha(opacity=30); }
a.hmHotspotRect:hover { border:1px solid #000; background:#FFF; opacity:0.3; filter:alpha(opacity=30) }
a.hmHotspotEllipse:hover { border:1px solid #000; background:#FFF; opacity:0.3; filter:alpha(opacity=30) }
To override this, you need to put your own version in the <head> section of the skin in a location that comes AFTER this reference to the main CSS file:

The easiest way to do it is to put it directly before the closing </head> tag, like this:

Code: Select all

<style type="text/css">
.hmImageMap a.hmHotspotRect { display:block; position:absolute; border: 5px solid red; background:transparent; opacity:1; filter:alpha(opacity=100)  }
.hmImageMap a.hmHotspotEllipse { display:block; position:absolute; border-radius:50%; border: 5px solid red; background:transparent; opacity:1; filter:alpha(opacity=100) }
.hmImageMap:hover a.hmHotspotRect {opacity:1; filter:alpha(opacity=100); }
.hmImageMap:hover a.hmHotspotEllipse { opacity:1; filter:alpha(opacity=100); }
a.hmHotspotRect:hover { border:5px solid red; background:transparent; opacity:1; filter:alpha(opacity=100); box-shadow: 2px 2px 5px 2px #888888;}
a.hmHotspotEllipse:hover { border:5px solid red; background:transparent; opacity:1; filter:alpha(opacity=100); box-shadow: 2px 2px 5px 2px #888888;}
</style> 
</head>
In this example I've made the outlines red and the background fully transparent, by defining the background color as transparent. I still need to set all the opacity values to completely opaque to override the values in the original and prevent the borders from being semi-transparent. The .hmImageMap:hover a.hmHotspotRect and .hmImageMap:hover a.hmHotspotEllipse settings in the middle make all the hotspots change as soon as the mouse enters the entire image, and I've reset that here.

I've added a drop shadow as a hover effect for the individual hotspots in the last two entries but you can do that in any way you like, of course.
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
User avatar
Anna Ryut
Posts: 23
Joined: Thu Feb 02, 2017 10:02 am

Re: How to customize svg images?

Unread post by Anna Ryut »

Oh, this is awesome. Thanks)
Post Reply