Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
vlazic opened this issue Jun 21, 2023 · 1 comment
Open
Labels
enhancement New feature or request

Comments

@vlazic
Copy link

vlazic commented Jun 21, 2023

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 vlazic added the enhancement New feature or request label Jun 21, 2023
@vlazic
Copy link
Author

vlazic commented Jun 21, 2023

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

1 participant