Change SVG Icon in Modern Standard Webhelp skin

This forum is for discussions on the Help & Manual Premium Pack and the Premium Pack Toolbox configuration utility introduced with Premium Pack 3

Moderators: Alexander Halser, Tim Green

Post Reply
DeWayne Rosene
Posts: 45
Joined: Wed Feb 08, 2012 6:34 pm

Change SVG Icon in Modern Standard Webhelp skin

Unread post by DeWayne Rosene »

I have been trying to change the Last/Next topic Icons in the subject skin. Following the "Using Your Own Icons" instructions. No matter what I do all I end up with is a blank spot (could be a white box) where the Icon should appear. I started with a .png I drew and converted to .svg using a couple of free web based conversion tools. No matter how I tweak the original image or the processing options, no Joy! Cutting and pasting the long Icon path is the only challenge because all the tools introduce line breaks. I even re-created a .png from the sprite embedded in the _svgicons.html file, tweaked the image a bit and couldn't complete the round trip and see the tweaked version. Any recommended method for creating the .png, best size, etc and tool for converting to .svg?

The only clue I have is that the path to the embedded icons contains only numbers with 2 to 3 decimal places and all the .svg path files I create contain only whole numbers.

Don't ask why I don't want to use your nav icons :lol:

I would also like to get rid of the words below the four icons, may as well broach that subject now too.
User avatar
Tim Green
Site Admin
Posts: 23156
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Change SVG Icon in Modern Standard Webhelp skin

Unread post by Tim Green »

Hi DeWayne,

IYour SVG tool may be incompatible, but not having decimal places doesn't necessarily mean that. Your SVG sprite should look something like this:

Code: Select all

<!-- Next topic in topic navigation --></IF_UNDEFINED>
<g class="svgsprite" id="angle-circled-right" width="27" height="32" viewBox="0 0 27 32">
<path d="M12.8 24.896l8.096-8.096q0.352-0.352 0.352-0.8t-0.352-0.8l-8.096-8.096q-0.32-0.352-0.8-0.352t-0.8 0.352l-1.824 1.792q-0.352 0.352-0.352 0.832t0.352 0.8l5.472 5.472-5.472 5.472q-0.352 0.352-0.352 0.8t0.352 0.832l1.824 1.792q0.352 0.352 0.8 0.352t0.8-0.352zM27.424 16q0 3.744-1.824 6.88t-4.992 4.992-6.88 1.856-6.912-1.856-4.96-4.992-1.856-6.88 1.856-6.88 4.96-4.992 6.912-1.856 6.88 1.856 4.992 4.992 1.824 6.88z"></path>
	</g><IF_UNDEFINED>
The part you enter is only the <path ... </path>. Everything in the <g> tag should remain unchanged. What is important is that it should be a single path tag only, with a single d="" value and everything after the numbers in the d= value should be removed. If you're having trouble with line breaks use a good free code editor like Notepad++.
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.
DeWayne Rosene
Posts: 45
Joined: Wed Feb 08, 2012 6:34 pm

Re: Change SVG Icon in Modern Standard Webhelp skin

Unread post by DeWayne Rosene »

I have been using Notepad ++ for years too. Its great, you should check out directory opus too, my second essential tool.

I replaced the path (only) for the "right" arrow,
<g class="svgsprite" id="angle-circled-right" width="27" height="32" viewBox="0 0 27 32">
<path d="M12.8 24.896l8.096-8.096q0.352-0.352 0.352-0.8t-0.352-0.8l-8.096-8.096q-0.32-0.352-0.8-0.352t-0.8 0.352l-1.824 1.792q-0.352 0.352-0.352 0.832t0.352 0.8l5.472 5.472-5.472 5.472q-0.352 0.352-0.352 0.8t0.352 0.832l1.824 1.792q0.352 0.352 0.8 0.352t0.8-0.352zM27.424 16q0 3.744-1.824 6.88t-4.992 4.992-6.88 1.856-6.912-1.856-4.96-4.992-1.856-6.88 1.856-6.88 4.96-4.992 6.912-1.856 6.88 1.856 4.992 4.992 1.824 6.88z"></path>

ending up with this,
<g class="svgsprite" id="angle-circled-right" width="27" height="32" viewBox="0 0 27 32">
<path d="M761 796 l-41 -55 -37 16 c-26 11 -71 16 -143 17 -272 2 -433 -111 -471 -329 -13 -76 -6 -183 16 -224 36 -70 171 -67 203 4 7 14 12 62 12 106 0 85 14 127 54 161 29 25 110 48 168 48 49 0 49 0 34 -22 -24 -35 -21 -86 7 -98 33 -13 436 -80 484 -80 33 0 43 4 48 20 11 34 -3 67 -113 280 l-107 205 -37 3 c-34 3 -39 -1 -77 -52z"></path>

I have attached a png for the item, and the full text of two svg versions. I removed the line ends in the path when used above and also the / before the closing > but have tried it multiple ways)

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010 ... /svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="113.000000pt" height="108.000000pt" viewBox="0 0 113.000000 108.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.16, written by Peter Selinger 2001-2019
</metadata>
<g transform="translate(0.000000,108.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M797 798 c-70 -100 -60 -94 -112 -64 -40 24 -56 27 -143 28 -98 0
-197 -18 -255 -49 -48 -25 -117 -94 -142 -143 -49 -96 -55 -252 -13 -305 26
-33 76 -34 106 -2 19 20 22 35 22 108 1 137 35 189 149 223 64 19 169 21 205
4 l26 -11 -35 -48 c-32 -45 -33 -48 -14 -54 45 -15 464 -82 467 -75 2 7 -216
440 -222 440 -2 0 -19 -24 -39 -52z"/>
</g>
</svg>

...
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010 ... /svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="113.000000pt" height="108.000000pt" viewBox="0 0 113.000000 108.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.10, written by Peter Selinger 2001-2011
</metadata>
<g transform="translate(0.000000,108.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M797 798 c-70 -100 -60 -94 -112 -63 -42 24 -56 27 -143 27 -98 0 -197 -19 -255 -49 -48 -25 -117 -94 -142 -143 -50 -100 -55 -261 -9 -307 30 -30 74 -30 102 0 18 19 21 34 21 109 0 100 14 142 60 181 64 53 254 81 305 44 16 -12 15 -16 -19 -60 -42 -55 -70 -44 220 -92 116 -20 217 -38 226 -41 10 -3 -24 74 -94 213 -60 120 -113 221 -116 226 -4 4 -24 -16 -44 -45z m129 -179 c47 -94 84 -172 82 -174 -2 -2 -363 59 -385 65 -1 0 8 18 20 40 l22 41 -29 26 c-28 24 -34 25 -127 21 -126 -5 -197 -38 -244 -112 -27 -44 -30 -60 -33 -140 -4 -98 -12 -116 -47 -116 -37 0 -45 21 -46 124 -1 85 2 103 25 149 46 94 97 133 216 166 48 14 104 21 159 21 71 0 92 -4 137 -27 l54 -27 24 24 c14 12 36 38 48 56 13 19 26 34 30 34 5 0 46 -77 94 -171z"/>
</g>
</svg>
You do not have the required permissions to view the files attached to this post.
User avatar
Tim Green
Site Admin
Posts: 23156
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Change SVG Icon in Modern Standard Webhelp skin

Unread post by Tim Green »

Hi Dewayne,

This is a different kind of SVG definition that is unfortunately not compatible with the way these sprites are set up. If you want to make compatible SVG icons for this kind of thing I can recommend Axialis Icon Workshop.
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.
Post Reply