search

creecros / simple_logo_gen

A simple logo generator using fontawesome.
https://creecros.github.io/simple_logo_gen/
MIT License
121 stars 33 forks source link

[FEATURE] Rendering issue with SVG-generated logo outside the browser #30

Open vlazic opened 1 year ago

vlazic commented 1 year ago

Is your feature request related to a problem? Please describe. Yes, I encountered an issue related to the generated SVG files. While the generated SVG works perfectly in-browser, it appears to import fonts via URL, which causes problems when attempting to utilize these SVG files in desktop applications.

Here is an example of the SVG code:

<?xml version="1.0" standalone="no"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="114" height="114"><style>
@import url("https://fonts.googleapis.com/css?family=Montez|Lobster|Josefin+Sans|Shadows+Into+Light|Pacifico|Amatic+SC:700|Orbitron:400,900|Rokkitt|Righteous|Dancing+Script:700|Bangers|Chewy|Sigmar+One|Architects+Daughter|Abril+Fatface|Covered+By+Your+Grace|Kaushan+Script|Gloria+Hallelujah|Satisfy|Lobster+Two:700|Comfortaa:700|Cinzel|Courgette|Annie+Use+Your+Telescope|Baloo|Bowlby+One+SC|Bungee+Inline|Cabin+Sketch|Caveat|Contrail+One|Damion|Economica|Fascinate+Inline|Faster+One|Fredericka+the+Great|Gabriela|Just+Another+Hand|Kodchasan|Love+Ya+Like+A+Sister|Megrim|Monoton|Mouse+Memoirs|Podkova|Pompiere|Quicksand|Reenie+Beanie|Rokkitt|Six+Caps|Source+Sans+Pro|Special+Elite|Spicy+Rice|VT323|Wire+One");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css");
</style>
<defs/><g><text fill="#645785" stroke="none" font-family="&quot;Font Awesome 6 Free&quot;" font-size="100px" font-style="normal" font-weight="900" text-decoration="normal" x="7" y="57" text-anchor="start" dominant-baseline="central"></text></g></svg>

Describe the solution you'd like While I'm aware that a solution might be complex and don't suggest anything specific, I think it's worth investigating potential approaches to make these SVGs more versatile.

Describe alternatives you've considered At the moment, I don't see any easy alternative solutions that can bypass this issue. The core problem is with the font-importing mechanism, which inherently requires internet access and a browser to process the imported URLs.

Additional context Lastly, I just wanted to commend the author on creating an excellent SVG generation tool! It's a great idea and has been well implemented. Despite the issue I encountered, I found the tool very useful and it has been a positive experience using it :)

vlazic commented 1 year ago

I have found a temporary solution: I actually need SVG to have high resolution logos. I solved it by exporting the configuration to JSON, opening the JSON file, changing the font size for the icon and text to a very large number. Then, I imported the configuration and downloaded the favicon and logo as PNG. If anyone else has the same problem, this may serve as an idea.