|
Replies:
17
-
Pages:
2
[
1
2
| Next
]
-
Last Post:
31 May 19, 20:30
Last Post By: AndreWolff
|
Threads:
[
Previous
|
Next
]
|
|
Posts:
1,289
Registered:
14-Dec-2007
|
|
|
How to change the colors of an svg icon via a htt file?
Posted:
28 May 19, 21:57
|
|
|
I use a home.svg file in the res directory as the home icon in the menu.
I like to offer the possibility that the user can change the colors of this icon, so I like to change the colors in the home.svg text file in a htt file.
What code should I add to handle a svg file via a htt file?
Edit:
I found the solution:
Add at the end of the index file:
<ja:if test="<%= indexNum == void || indexNum == 1 %>">
File homeBtnTemplate = new File(skinDirectory, "homeBtn.htt");
if (homeBtnTemplate.exists())
{
homeButton = "home.svg";
engine.processTemplateFile(homeBtnTemplate, new File(skinResDirectory,homeButton));
}
%>
</ja:if>
where homeBtn.htt is a copy of the currently used home.svg file.
This solution is based on a hint I got some years ago of jGromit.
Edited by: AndreWolff on 28-May-2019 22:21
|
|
|
Posts:
591
Registered:
30-Aug-2004
|
|
|
Re: How to change the colors of an svg icon via a htt file?
Posted:
29 May 19, 09:08
in response to: AndreWolff
|
|
|
I like to use ".svt" as the suffix for SVG templates
To me "ht" implies "html"
|
|
|
Posts:
1,289
Registered:
14-Dec-2007
|
|
|
Re: How to change the colors of an svg icon via a htt file?
Posted:
29 May 19, 09:38
in response to: jimberry
|
|
|
I like to use ".svt" as the suffix for SVG templates
To me "ht" implies "html"
Yes, I will also apply your convention!
|
|
|
Posts:
8,039
Registered:
31-Jan-2006
|
|
|
Re: How to change the colors of an svg icon via a htt file?
Posted:
29 May 19, 11:50
in response to: AndreWolff
|
|
Helpful |
|
|
Probably better to do it in init.bsh, which gets rid of the checking for index level.
Instead of planting the result in the skin's res directory, just put it directly into the output res directory for the album.
And no reason to check to make sure the template exists. If it doesn't, something is very wrong with the skin installation, and you want it to throw a big, ugly error so the user knows that something's wrong, instead of just being confused by the non-appearance of his chosen button color. File icontemplate = new File(skinDirectory + "/iconSVGs/home.svt");
File iconoutput = new File(rootOutputDirectory + "/res/home.svg");
engine.processTemplateFile(icontemplate, iconoutput);
I do this in virtually all of my newer skins, and it works without a hitch. The only difference is that I put together a list of the icons and iterate through them (the list is selective, so I generate only the icons that will be needed). Take a look at the tail end of init.bsh in Pluto, for example.
|
|
|
Posts:
591
Registered:
30-Aug-2004
|
|
|
Re: How to change the colors of an svg icon via a htt file?
Posted:
29 May 19, 14:43
in response to: AndreWolff
|
|
|
Are you aware that it is also possible to include the SVG code inline as part of the HTML code? This allows you to modify the resulting image (or images) with a greater range of CSS styles. See examples 07 to 18 in this test web page
In these examples, CSS is used for individual stroke colors, color or gradient fills, and also for rotate and scale.
|
|
|
Posts:
1,289
Registered:
14-Dec-2007
|
|
|
Re: How to change the colors of an svg icon via a htt file?
Posted:
29 May 19, 19:53
in response to: jimberry
|
|
|
I like to use ".svt" as the suffix for SVG templates
To me "ht" implies "html"
Very strange, but if I change homeBtn.htt into homeBtn.svt, the homeBtn.svt file is not visible if I select Edit skin files.
There is no problem if I use the htt extension!
|
|
|
Posts:
8,039
Registered:
31-Jan-2006
|
|
|
Re: How to change the colors of an svg icon via a htt file?
Posted:
29 May 19, 20:00
in response to: AndreWolff
|
|
|
Very strange, but if I change homeBtn.htt into homeBtn.svt, the homeBtn.svt file is not visible if I select Edit skin files.
There is no problem if I use the htt extension!
If homeBtn.htt isn't at the root level of the skin directory, it doesn't get opened automatically in the skin editor anyway. If your SVG templates are stashed away in a subdirectory, you can open them from the skin editor with File, Open, no matter what the file extension is.
|
|
|
Posts:
1,289
Registered:
14-Dec-2007
|
|
|
Re: How to change the colors of an svg icon via a htt file?
Posted:
29 May 19, 21:47
in response to: JeffTucker
|
|
|
If homeBtn.htt isn't at the root level of the skin directory, it doesn't get opened automatically in the skin editor anyway. If your SVG templates are stashed away in a subdirectory, you can open them from the skin editor with File, Open, no matter what the file extension is.
homeBtn.svt was in the root of the skin directory, as is index.htt but if I change it in homeBtn.htt in the same directory, it is opened automatically.
|
|
|
Posts:
8,039
Registered:
31-Jan-2006
|
|
|
Re: How to change the colors of an svg icon via a htt file?
Posted:
29 May 19, 21:51
in response to: AndreWolff
|
|
|
Yes, I understand that. So what?
|
|
|
Posts:
1,289
Registered:
14-Dec-2007
|
|
|
Re: How to change the colors of an svg icon via a htt file?
Posted:
30 May 19, 08:44
in response to: jimberry
|
|
|
Are you aware that it is also possible to include the SVG code inline as part of the HTML code?
No. Your example page looks quit impressive, but it makes the html code longer and more complicated.
The template method works for me now, so why should I change that in inline svg code?
What is the basic advantage of your code with respect to the simple svg file made with a template?
And it would help if you give just one simple code example for code like this:
<a href="javascript:OpenGoogleMapsRoute()"><img src="../../res/google-maps.svg" class="roundbutton" alt="Kaart" title="Kaart"></a>
|
|
|
Posts:
591
Registered:
30-Aug-2004
|
|
|
Re: How to change the colors of an svg icon via a htt file?
Posted:
30 May 19, 09:59
in response to: AndreWolff
|
|
|
... ..., but it makes the html code longer and more complicated.
but the combination of html code + svg code is at least as long and more complicated because it is in two places.
What is the basic advantage of your code with respect to the simple svg file made with a template?
the advantage is simplification and the ability to style the SVG with more CSS styles
And it would help if you give just one simple code example
The code examples are in the HTML of the example page which you can see with CTRL+U
|
|
|
Posts:
8,039
Registered:
31-Jan-2006
|
|
|
Re: How to change the colors of an svg icon via a htt file?
Posted:
30 May 19, 13:36
in response to: jimberry
|
|
|
... ..., but it makes the html code longer and more complicated.
but the combination of html code + svg code is at least as long and more complicated because it is in two places.
I know what André is getting at, however. It's always struck me that the SVG and CSS folks never quite closed the loop on integrating the two. Having a bunch of inline stuff in your HTML is considered non-semantic, something to be avoided. But if you keep your SVG definition stashed in a separate file, you can't target it with CSS.
In short, what you can't do, but should be able to do, is have your SVG in a file (just like any other image - you don't see JPG code when you look at the HTML source of a page!) like this next.svg: <?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="128.000000pt" height="128.000000pt" viewBox="0 0 128.000000 128.000000"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,128.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M730 955 l0 -135 -315 0 -315 0 0 -190 0 -190 315 0 315 0 0 -135 c0
-74 3 -135 8 -135 4 0 111 104 237 230 l230 230 -230 230 c-126 127 -233 230
-237 230 -5 0 -8 -61 -8 -135z"/>
</g>
</svg>
You should be able to have some CSS in your common.css file like this: .next-red {fill: #ff0000;}
And finally, the HTML: <img src='next.svg' class='next-red' alt='next'>
Generating the red "next" arrow into a new file during album creation is clumsy. Having the SVG stuff inline on your page is clumsy. Neither of the available approaches is clean and simple.
|
|
|
Posts:
1,289
Registered:
14-Dec-2007
|
|
|
Re: How to change the colors of an svg icon via a htt file?
Posted:
30 May 19, 14:43
in response to: jimberry
|
|
|
the advantage is simplification and the ability to style the SVG with more CSS styles
Well I don't tnink it is a simplification and with a template file you can change everything, even the parh if you like!
Edit: a real simplification is the use of free icons of Google, Bootstrap and others: https://www.w3schools.com/icons/default.asp
Edited by: AndreWolff on 30-May-2019 17:26
|
|
|
Posts:
1,289
Registered:
14-Dec-2007
|
|
|
Re: How to change the colors of an svg icon via a htt file?
Posted:
31 May 19, 18:21
in response to: JeffTucker
|
|
|
Probably better to do it in init.bsh, which gets rid of the checking for index level.
Well, I added at the end of init.bsh: File slideshowTemplate = new File(skinDirectory, "slidePagePar.htt");
slidePage = "slidePage.js";
engine.processTemplateFile(slideshowTemplate, new File(outputDirectory,slidePage));
but this gives error message:
Undefined argument: outputDirectory
which I don't understand,. No error if I put this in index.htt, so so I keep my extra template files in index.htt
|
|
|
Posts:
8,039
Registered:
31-Jan-2006
|
|
|
Re: How to change the colors of an svg icon via a htt file?
Posted:
31 May 19, 18:56
in response to: AndreWolff
|
|
|
It has to be rootOutputDirectory when you're in init.bsh.
|
|
|
|
Legend
|
|
Forum admins
|
|
Helpful Answer
|
|
Correct Answer
|
|