bernhard Posted August 17, 2023 Share Posted August 17, 2023 I'm working on my new website that will list all my modules with docs etc.; I also want to have a logo for every module, but I don't want to have to manually create it. It's basically always the name of the logo plus an icon on top of a green hexagon: https://raw.githubusercontent.com/baumrock/RockFrontend/main/docs/logo.svg Are there any SVG experts that know how I could create those SVGs dynamically? I'd like to really create an SVG file, not only the SVG markup or a fake image with some CSS layering magic. I'd like to have an SVG created on page save so (after entering the module name and uploading the icon) that I can then instantly use for the docs on Github as well. Any ideas are welcome, but obviously if that is too much work it would also be an option to just create those images manually... It's just more fun if it's automated ? Thx in advance ? Link to comment Share on other sites More sharing options...
LMD Posted August 17, 2023 Share Posted August 17, 2023 (edited) I'm on a mobile, so can't test this but you could try the following... Create a dummy SVG file with a placeholder icon and module name all aligned and styled properly. Give the placeholder icon and text span containing the changable module name unique IDs. I assume the real icons are also SVG (e.g. FontAwesome) and not an image? On page save (with PHP, I assume), open the dummy SVG and regex search-replace the icon (open the icon code too if necessary) and module name. Save new code as a new SVG file. That would be my stating point. Edited August 17, 2023 by LMD Edited for clarity 1 Link to comment Share on other sites More sharing options...
bernhard Posted August 17, 2023 Author Share Posted August 17, 2023 Thx. Yeah sounds good. Regarding the text I was wondering if it is a good idea to have that as text rather than converted to paths. Usually I convert it to paths for maximum compatibility, but that would make things more complicated I guess. But I didn't do any research here, maybe there are some linux tools update, seems I could do that with inkscape: https://stackoverflow.com/questions/15203650/programmatically-convert-svg-shapes-to-paths-lineto-moveto Or maybe I can include the font file in my svg?? https://stackoverflow.com/questions/71060147/why-is-my-svg-file-not-using-my-font-file Any advice would be welcome ? Edit: transfonter is an interesting tool! https://transfonter.org/ --> ubuntu bold with letters A-Z and a-z results in an 13kb css file, wich sounds ok compared to the alternative of installing inkscape on my server and converting text to curves on save... 1 Link to comment Share on other sites More sharing options...
monollonom Posted August 17, 2023 Share Posted August 17, 2023 (funnily I just went through the same question regarding showing a custom font in a svg) If you want your svg to show the font when displaying it through an <img> tag you will need to have it embedded as a base64, as mentionned in your SO link. My take on what you want to achieve is something along the lines of what I described here: With transfonter, you could generate a .svg version of the font file you're using and then build the svg with the icon and module name using this php library. I haven’t tested it so I can’t vouch for it but I would try this way first. 1 Link to comment Share on other sites More sharing options...
bernhard Posted August 17, 2023 Author Share Posted August 17, 2023 Interesting idea! I've just found https://github.com/meyfa/php-svg which looks also like a good option?! Link to comment Share on other sites More sharing options...
monollonom Posted August 18, 2023 Share Posted August 18, 2023 16 hours ago, bernhard said: Interesting idea! I've just found https://github.com/meyfa/php-svg which looks also like a good option?! I’d still go with the EasySVG one. From what I'm seeing, though more “recent”, this library lacks the “font to paths” part that the other provides with .svg font files. Please let us know once you’ve handled this, I’m curious ? Link to comment Share on other sites More sharing options...
BrendonKoz Posted August 18, 2023 Share Posted August 18, 2023 A slightly simpler method would be to only handle the logo icon part via SVG, and align the rest with standard (custom styled) HTML markup. I applaud your enthusiasm for including it all though, and will definitely also look through the links that were shared in this discussion. It's so much easier to dynamically generate bitmap images than SVG for things like this, but filesize and other attributes aren't nearly as nice. Shoot, if you had a specific template in mind (like you do for this particular example), you could even make it responsive. ? Link to comment Share on other sites More sharing options...
Recommended Posts