Hi!
I realize GeoJSON and TopoJSON might be smaller in size, but I have no idea how to convert my SVGs to these formats.
Is it possible to generate the GeoJSON/TopoJSON based on an image/svg? My maps use custom regions, so there wouldn't be any existing maps exactly like mine. Thanks for the info regarding drill down, I didn't know about it. Unfortunately it wouldn't fit my needs. I don't have a lot of small parts, just high detail for the SVGs.
The compressed SVG works everywhere else, but not in Highmaps, so I assume it has to do with how Highmaps works with modern SVGs.
I created two random examples to demonstrate my issue.
This one works:
Code: Select all
<svg width="646" height="646" viewBox="0 0 646 646" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="#D9D9D9" d="M226 99C245 30 339 -32 389 19C417 47 382 91 410 120C453 165 537 45 568 99C593 141 515 172 531 219C547 269 628 243 643 294C663 360 539 362 531 431C524 481 600 511 568 556C536 602 466 556 509 612C552 668 461 645 410 612C359 580 365 511 429 489C494 468 410 431 330 431C250 431 330 511 330 511C330 511 295 556 242 511C188 465 289 442 226 447C163 452 116 377 44 431C-29 484 4 326 44 294C84 262 140 345 163 277C185 209 240 258 258 219C278 175 212 145 226 99Z"/></svg>
This is the same SVG, ran through SVGO compression to reduce its size, and it doesn't work in Highmaps:
(NOTE: it rewrites/rounds paths)
Code: Select all
<svg width="646" height="646" viewBox="0 0 646 646" fill="none" xmlns="http://www.w3.org/2000/svg" ><path fill="#D9D9D9" d="M226 99c19-69 113-131 163-80 28 28-7 72 21 101 43 45 127-75 158-21 25 42-53 73-37 120 16 50 97 24 112 75 20 66-104 68-112 137-7 50 69 80 37 125-32 46-102 0-59 56s-48 33-99 0c-51-32-45-101 19-123 65-21-19-58-99-58s0 80 0 80-35 45-88 0c-54-46 47-69-16-64s-110-70-182-16c-73 53-40-105 0-137s96 51 119-17c22-68 77-19 95-58 20-44-46-74-32-120Z"/></svg>
In Highmaps I include the paths with the format:
Examples:
Code: Select all
{
name: "Default path map",
value: 100,
path: "M226 99C245 30 339 -32 389 19C417 47 382 ...",
}
However, this version doesn't seem to work:
Code: Select all
{
name: "Compressed path map",
value: 100,
path: "M226 99c19-69 113-131 163-80 28 28-7 72 21 101 43 ...",
}