Just found one interesting place where SVG works but multiple Rectangle()s won’t — in detail layouts:
Here’s how the same progress bar looked when built with rectangles:
3 Likes
@Paul_Danyliuk good find, this looks so good! What does the code look like for a progress bar like this? Sorry, definitely not an expert in SVG 
Edit: This also opens the door to gradients and better looking progress bars 
Is there a site where you can generate SVG code? Thanks a lot 
Edit 2: Found a few ones but would still love to know how you did it ahah
1 Like
Gradients — totally possible. This exact layout is actually possible.
Online editors — not sure. But there’s a range of standalone vector drawing applications, from free (e.g. Inkscape) to paid (e.g. Affinity Designer, Adobe Illustrator) that export SVG. One downside is that they usually export a lot of extra metadata within the files. E.g. see the “organization chart” example in the doc in my original post — I simply copied the first copyright-free chart from Wikipedia I found, and perhaps 90% of its SVG code is redundant garbage that could easily not be there.
It is actually very simple to compose SVG by hand and include only the essentials. There are lots of tutorials. One of the knowledge sources on web technologies that I personally trust is MDN:
Here’s how I did that particular one. I already fed urlencoded SVG (prepared through my doc) to avoid unnecessary calculations, since it was simply about filling in one width value:
It’s just two <rect />s in an <svg />, no groups even.
3 Likes
I struggled with this in the Meeting Agenda template. The detail view wants to crop and size images to fit for some of the layout options and forces rectangles to squares. That’s why all the timer stuff is outside the detail view layout and in the canvas.
I might have to dig in and give this strategy a try.
1 Like
Quick question - got a good example for doing a word cloud like this?
What do you mean exactly?
Uhh… well, the complexity here is to come up with the algorithm to lay out the words (calculate x/y/size/rotation), then it’s as trivial as just concatenating all the <g transform=...><text>...</text></g>'s together.
No idea how to lay out automatically t the moment.
Was inspired by your SVG post (thank you!)
I’ve been trying to find a quick way (for years) to create a simple product milestone view (I always made these in Google Presos).
Using your naive SVG method, I’ve created this: https://coda.io/d/Formula-SVG_dL1cBD5Vsag. It actually works really well (though there are lots of formatting improvements that could be made.
Now I have a problem though - The regex formula to convert to “naive SVG” format is really expensive and slow on a performance basis. Of the total compute time of 250ms, 210ms of that is coming from the regex formula (copied below for viz).
Any ideas for how to streamline the conversion step to SVG?
Here’s that REGEX SVG conversion formula:
Concatenate(
“data:image/svg+xml,”,SVG_output_combined_markup.RegexReplace("\n|\t", “”).Split("").FormulaMap(
CurrentValue.Switch(
" ", “%20”,
“<”, “%3C”,
“>”, “%3E”,
“#”, “%23”,
CurrentValue
)
)
)
Hey @Brandon_Trew,
Instead of converting the whole SVG every time, maybe “pre-convert” building pieces beforehand like I did in the tree map impl?
Take a look at Helpers: Chart settings section, HLP Templates table.
You can actually pre-convert them not in Coda but using some external tool and just save like that.
Love this. Really smart interplay between the tables and the formulamap. let me work on incorporating this. thank you!
1 Like
One more SVG chart implementation. This time using paths and some basic trigonometry (polar → cartesian)
Time to revive this topic, lol.
Another freshly discovered capability: HTML & CSS in SVG, which gives us HTML & CSS in Coda!
1 Like
Hi folks !
As requested by @Paul_Danyliuk in twitter, and after a few hours playing with Paul’s Trick, I share here a few use cases to generate cool and fully automatized CODA svg.
Given the possibilities, I keep on investating in the several possibilities and use case possible. Please reach me out if you have any ideas/wish for me to work on !
I’ve planned to prepare a full tutorial article in the coda community forum, and also in my blog, to present in detail how you can generate colored map (or whatever svg you want) and also gantt chart
Obviously all those svg’s are dynamically interfaced with coda data, so that this is all automatic, and linked with your information.
Till I finish to write those detailed articles, please find a few view screenshot of the achievement 
Polar coordinates dataviz
- Use case : Any dataviz you want, with gradient-colored design (with a beating hearth, what a poet !)
Custom Colored SVG Map
- Use case : show gradient data through a country map, or industrial process with you process svg/dwg map
Time-Animated Map to show data evolution
- Use case : same than above, with time evolution
Bubble over Map
- Use case : target cities or locations, and show values with bubbles and moving size according to values
Gantt Chart Project Management
- Use case : track your planning project, with visual progress bar fully linked to your task
** Milestone tracker**
- Same than above, but easier
Weekly team planner
- Use Case : Team management, room/car management, classroom and schedule
16 Likes
Wow ! Awesome trop bien Quentin !
I love Coda for stimulating our brains into finding all sorts of clever way to innovate with it 
1 Like
Yes, the possibilities are just amazing ! My work now is to
- find another use cases
- be able to create easier possible way to generate and manipulate svg data
Lots of work still, but I can already use it professionaly !
2 Likes
Hey @Quentin_Morel —
In case you missed, you can also utilize some HTML+CSS in your SVG and take advantage of a higher level layout engine than tweaking coordinates yourself:
There’s also a pack that allows you to make and embed actual HTML+CSS+JS in Coda:
update: it’s broken now but the approach is still pretty valid if you can host the HTML file yourself.
1 Like
And therein lay the challenge.
HOST …
There are so few words in web technology that are so short, but come with such a long list of tasks and requirements. It’s a burden that stops many great ideas and solutions from coming to fruition; that was the promise of Itsy().
Ideally, a Pack would provide the capacity to host. I realize this is complex and rife with security issues, but there are some key advantages for Codans to consider this more deeply including, but not limited to hosting micro services for Coda formulas. Imagine a Pack that had an endpoint URL capable of serving Coda-bound content to external apps. This is no different than outbound webhooks, and I cannot imagine a better framework than to extend Packs to provide this capability. Just sayin’ …
That is exactly how the Mermaid Pack works, it is a Google Cloud function that generates the image on the fly and returns a url where to access it. The concept of Itsy can be applied the same way and with heavy caching