This question is not answered. Helpful answers available: 1. Correct answers available: 1.


Permlink Replies: 17 - Pages: 2 [ 1 2 | Next ] - Last Post: 31 May 19, 20:30 Last Post By: AndreWolff Threads: [ Previous | Next ]
AndreWolff

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
 
  Click to reply to this thread Reply
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
jimberry

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 in response to: AndreWolff
 
  Click to reply to this thread Reply
I like to use ".svt" as the suffix for SVG templates
To me "ht" implies "html" :-)
AndreWolff

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 in response to: jimberry
 
  Click to reply to this thread Reply
jimberry wrote:
I like to use ".svt" as the suffix for SVG templates
To me "ht" implies "html" :-)
Yes, I will also apply your convention!
JeffTucker

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 in response to: AndreWolff
Helpful
  Click to reply to this thread Reply
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.
jimberry

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 in response to: AndreWolff
 
  Click to reply to this thread Reply
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.
AndreWolff

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 in response to: jimberry
 
  Click to reply to this thread Reply
jimberry wrote:
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!
JeffTucker

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 in response to: AndreWolff
 
  Click to reply to this thread Reply
AndreWolff wrote:
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.
AndreWolff

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 in response to: JeffTucker
 
  Click to reply to this thread Reply
jGromit wrote:
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.
JeffTucker

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 in response to: AndreWolff
 
  Click to reply to this thread Reply
Yes, I understand that. So what?
AndreWolff

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 in response to: jimberry
 
  Click to reply to this thread Reply
jimberry wrote:
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>
jimberry

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 in response to: AndreWolff
 
  Click to reply to this thread Reply
AndreWolff wrote:
... ..., 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
JeffTucker

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 in response to: jimberry
 
  Click to reply to this thread Reply
jimberry wrote:
AndreWolff wrote:
... ..., 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.
AndreWolff

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 in response to: jimberry
 
  Click to reply to this thread Reply
jimberry wrote:
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
AndreWolff

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 in response to: JeffTucker
 
  Click to reply to this thread Reply
jGromit wrote:
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
JeffTucker

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 in response to: AndreWolff
 
  Click to reply to this thread Reply
It has to be rootOutputDirectory when you're in init.bsh.
Legend
Forum admins
Helpful Answer
Correct Answer

Point your RSS reader here for a feed of the latest messages in all forums