Logo SVG improvements
ndorfin opened this issue · 5 comments
Hi @matuzo
I was looking at the HTMHell logo, and it looks like it could be improved by:
- re-using the pentacle side shapes and rotating each one,
- replace the background path with a circle
- using strokes on each pentacle side to cover the circle, or a mask
- only include the 'heaven' part of the logo when needed
- Compressing the SVG using SVGOMG (major byte difference)
- Maybe: Re-use letters (significant byte difference)
- Maybe: add classes to the SVG to toggle its use-cases
- Maybe: make it responsive. Show supporting text when container size is wide and tall enough.
Let me know if this is OK, and I'll issue a PR.
-S
Technique
By setting up one of the arms of the pentacle as a symbol <path>, I could <use> and rotate the other 4 arms into their places.
The pentacle group then became the basis for a <mask>, which after adding stroking and a <rect> background, the mask cut the sharp angles out of the new circle of the pentacle.
By using the re-use system for the letters, I was able to reduce all the duplicate letters.
(Everything in red here is a symbol, or re-used in a <use> element)
Output
The results are encouraging.
- Original image: 53KB
- New image: 35KB
After using SVGOMG (and comparing g-zipped):
- Current implementation
logo.txt: 10.8KB (baseline) - Original image: 5KB
- New image: 4KB
Considerations:
- ✅ Greatly reduced file-size (34% of the original)
- ✅ We're very close to being able to inject the SVG into the document now, and keep the document below the fabled 14KB.
- ✅ We have more semantic elements to work with (
circle), masks to animate, etc. - ✅ We can selectively add layers to the SVG (e.g. adding the 'Heaven' state) in a declarative way
I forgot to run it through svgomg? What a n00b. :)
Pretty impressive work. How many hours did you spend? Please create a PR and I'll be happy to merge it any time.
About 1-2 hours for the logo changes
But most of that was learning. e.g.:
- One can't use external URI
<mask>references in Webkit browsers. 🤦 - One can use transforms, fills, etc on
<use>elements 😮
I noticed that the SVG logo does not render when JavaScript is disabled. It looks like the SVG’s “innards” are dynamically fetched at https://www.htmhell.dev/assets/logo.txt and injected into the <svg> element.
Is this dependence on JavaScript necessary? Could the entire SVG code be located in an external SVG file and then added to the page as an image without the need for JavaScript?