search

freethlua / individualogist-whats-your-archetype

http://archetype.individualogist.com
0 stars 1 forks source link

Love compatibility SVG #61

Open freethlua opened 7 years ago

freethlua commented 7 years ago

I've been learning and playing around with SVGs and was wondering whether the love-compatibility chart/images could be converted to SVGs. I did a preliminary mockup and size reduction itself was massive (133kB -> 1kB) as well as it gives you the ability to make the text (heading/percentages) customizable.

Let me know if I should pursue this further

https://github.com/freethlua/individualogist-whats-your-archetype/blob/feat/love-compat-svg/src/components/slider-image-love-compat/assets/basic2.svg

freethlua commented 7 years ago

Size improvements can also be achieved in deluxe images which are really more suited as JPGs but are currently PNGs because transparency is needed, which can be easily achieved in SVGs (by embedding JPGs in a container).

https://github.com/freethlua/individualogist-whats-your-archetype/blob/feat/deluxe-svg/src/assets/images/deluxe/deluxe-books-flat.svg

zhixinlin commented 7 years ago

Hi Freeth,

Interesting approach, should be something worth looking into. What software are you using to convert the images to svg? I'm quite interested to look into this as well. Just tried different svg exporting combinations in Illustrator to achieve smaller file sizes but to no avail - file sizes end up being 300kb.

I suppose that if we're able to convert these images to svg, it would also be possible to include a percentage counter within the "heart shapes", which would be a pretty neat effect.

I don't expect you to invest too much time into this though, unless you believe that it will greatly improve loading speeds (which seems quite fine at the moment, but we're always open to improvements). We'll keep this is as a low priority issue for now

freethlua commented 7 years ago

Illustrator can convert an image to vector, then export as SVG. Simpler the image (like this one) better the results (smaller size). I did need to tweak this manually a little for texts and further simplification of auto-generated paths.

Yes, it's possible to include/modify any and all text from the app.

Also worth checking out: svg animations (lots of them too complex, but just to see what's possible). A much simpler thing could be having the percentages go from 0% to 66%, or having the hearts being drawn out and other such things that can be done with the vector paths.