I Added SVG Maps to My Travel Posts
cyberb.space
I Added SVG Maps to My Travel Posts
1–10 of 17 posts
Re: I Added SVG Maps to My Travel Posts
#2I like it, thanks.
Re: I Added SVG Maps to My Travel Posts
#3Super neat, the end result looks great and adds a lot to the posts. On the downside, inlining the map causes the HTML to balloon up to ~500kB/~180kB gzipped, compared to 30kB/10kB on this post (which lacks a map). The site is already insanely fast, but you could pull the map SVG into an actual file, so it's cached between pages, and becomes a lower-priority resource (which will ~halve First Contentful Paint). Then you'd just position the circle on top of that generic map file!
Re: I Added SVG Maps to My Travel Posts
#4Super neat, the end result looks great and adds a lot to the posts. On the downside, inlining the map causes the HTML to balloon up to ~500kB/~180kB gzipped, compared to 30kB/10kB on this post (which lacks a map). The site is already insanely fast, but you could pull the map SVG into an actual file, so it's cached between pages, and becomes a lower-priority resource (which will ~halve First Contentful Paint). Then yo…
You could then also run it through SVGO to compress it further.
Re: I Added SVG Maps to My Travel Posts
#5what a great looking website.
love the craft. now I need to set aside some time to read the post… !
Re: I Added SVG Maps to My Travel Posts
#6what a great looking website. love the craft. now I need to set aside some time to read the post… !
same here, looks really nice. Some websites are cool, if slightly gratuitous in how they try to look fancy. This looks elegant and cohesive
Re: I Added SVG Maps to My Travel Posts
#7Super neat, the end result looks great and adds a lot to the posts. On the downside, inlining the map causes the HTML to balloon up to ~500kB/~180kB gzipped, compared to 30kB/10kB on this post (which lacks a map). The site is already insanely fast, but you could pull the map SVG into an actual file, so it's cached between pages, and becomes a lower-priority resource (which will ~halve First Contentful Paint). Then yo…
You could then also run it through SVGO to compress it further.
Indeed - looks like SVGO can crush that map from 500kB down to like 80kB! Users on constrained data plans will love that. Of course, the author notes they want higher fidelity at some point. They could consider breaking the SVG into quadrants, perhaps? Or something more clever :)
Re: I Added SVG Maps to My Travel Posts
#8Also if the author views this, would love an rss feed. Can use the github pretty easily but maybe commits have updates, not new blog posts
Re: I Added SVG Maps to My Travel Posts
#9Really impressive! I've implemented a few kinds of maps on my blog, and I fail all of their requirements:
- I use a 3rd party platform
- My maps are generated at runtime
- They looks... let's say vaguely consistent on mobile & desktop
Maps were the most painful and time-consuming part of building a travel blog, but also perhaps the most satisfying.
Re: I Added SVG Maps to My Travel Posts
#10Super neat, the end result looks great and adds a lot to the posts. On the downside, inlining the map causes the HTML to balloon up to ~500kB/~180kB gzipped, compared to 30kB/10kB on this post (which lacks a map). The site is already insanely fast, but you could pull the map SVG into an actual file, so it's cached between pages, and becomes a lower-priority resource (which will ~halve First Contentful Paint). Then yo…
the author is also using many large, multi-megabyte photos in their travel posts, so I'm not sure how significant the size of the SVG content is, in comparison