HTML 5 top nav toolbar icons cannot be svg?

[GerardFalla]

We'd love to have scale independent svg icons for the topic toolbar icons in HTML 5 top-nav - but the skins editor doesn't seem to allow for that possibility - anyone find a way to get this to work?

[GerardFalla]

We've been trying to use an approach outlined by the great and powerful Oz to switch out header logo from png to svg to address this topic-toolbar issue in the top-nav HTML 5 output, but we're still seeing some troubles - anyone have any more "legitimate" MadCap ideas for achieving this goal?

[Corinna]

I've found a workaround for this, because this still is an issue four years later.

I want my search input button and the hamburger menu to be SVG to avoid image artifacts when scaling, but the Flare skin editor doesn't allow me to. Hence, I have resorted to exchanging the icon files as follows:

1. Create all output files for your online target. (Make sure to have PNG files referenced in the skin editor for the icons you want to replace with SVGs later.)
2. Generate your online target.
3. Look in the following stylesheets for the PNGs you would like to replace:
\<your Flare project>\Output\...\<your target>\Skins\Fluid\Stylesheets
> Styles.css
> Mobile.css
> Tablet.css

For instance, the search submit icon is currently found in this CSS class:

Code: Select all

.search-bar.search-bar-container .search-submit

Alternatively, you can use the F12 developer tools function of your browser to figure out which classes to modify.

4. Place your SVGs with which you would like to replace the PNGs in a suitable image folder.
5. Copy the CSS style from the Flare stylesheet to your own stylesheet.
6. Replace the PNGs with the SVG files by pointing to them in their image folder. Don't forget to add important! to override the MadCap style.

For the search submit button, this would currently look like this:

Code: Select all

.search-bar.search-bar-container .search-submit
{
	width: 2em;
	background: #<your color> url('../<your image folder>/your-svg-icon.svg') no-repeat center center !important;
	-pie-background: #<your color> url('../<your image folder>/your-svg-icon.svg') no-repeat center center !important;
}

[NorthEast]

I've found a somewhat tedious workaround to this, because this still is an issue four years later.

If you're using a Top Nav or Side Nav skin, then you can modify the icons from your own stylesheet - without needing to manually edit the output.

For example, to modify the image used by the print button:

Code: Select all

button.print-button div.button-icon
{
   background: transparent url('../Images/YourImage.svg') !important;
}

* The url of the image is relative to your stylesheet when you add this CSS; so the example above would look for an Images folder at the same level as your Stylesheets folder.
* The !important is required to override Flare's CSS.

Use your browser's dev tools (F12) to find the class names of the toolbar buttons, which use this sort of structure:

Code: Select all

<button class="button needs-pie print-button" title="Print">
   <div>
      <div role="img" class="button-icon-wrapper" aria-label="Print">
         <div class="button-icon"> </div>
      </div>
   </div>
</button>

[Corinna]

Thanks, Dave, I just figured that out myself. I wasn't sure if my stylesheet would override the Flare default stylesheets and only later found another thread covering the same topic.

viewtopic.php?f=6&t=31745&p=137469&hilit=SVGs#p137402