menu

Imba

The language for building next-gen web applications

Channels
Team

How to use SVG with Imba?

May 31, 2019 at 7:57pm

How to use SVG with Imba?

May 31, 2019 at 7:57pm
Since no one is answering on Gitter I will ask again here...
I'm trying to use SVG but whatever I do generates an error in the browser console.
If I extend the svg tag like this:
export tag Spinner < svg
I get the console error convert undefined or null to object.
If instead I try to do this:
def render
<self>
<svg>
I get the console error TypeError: Cannot read property 'build' of undefined.
There is nothing else in this tag, other than the almost empty render method.
Anyone knows what might be happening?

May 31, 2019 at 8:02pm
Ok, apparently svg tags and attributes need a namespace...
Weird that the docs do not mention any of it.
like-fill
1
  • reply
  • like

June 1, 2019 at 2:49am
Yeah. it's an issue that needs to be solved still. Sorry the chat is a bit slow lately. I'm one of the more active ones at the moment, and I'm trying to get people to use spectrum over gitter so i can save questions and answeres like this. We've talked about this before, and provided solutions.
like-fill
1
  • reply
  • like
Thanks for sharing the scimba example.
  • reply
  • like
This is how uses it on imba.io
export tag Logo
def render
<self>
<svg:svg xmlns="http://www.w3.org/2000/svg" width="116" height="108" viewBox="0 0 116 108">
<svg:g fill="#3E91FF" fill-rule="evenodd">
<svg:path d="M38.8638869...">
Edited
  • reply
  • like
I was told I needed to extend attributes once, and this is what I did, but I’m not sure if it was all necessary. Hopefully we get this fixed in imba soon.
extend tag svg:svg
attr viewBox
extend tag svg:path
attr fill
attr stroke
attr color
attr overflow
attr stroke-linecap
attr stroke-linejoin
extend tag svg:text
attr font-family
attr font-size
attr letter-spacing
attr word-spacing
attr fill
tag logo
def render
<self>
<ref go="/">
<svg:svg width="300" viewBox="0 0 250 95.354691">
<svg:text style="line-height:125%" x="36.909" y="41.764" font-size="55.069" letter-spacing="2.692" fill="#ae81ff">
<svg:text style="line-height:125%" x="124.447" y=y font-size=size letter-spacing="2.692" fill="#ae81ff">
<svg:path d="M82.72 ...">
<svg:path d="M11.025 ...">
<svg:path d="M35.07 ...">
<svg:path d="M172 ...">
  • reply
  • like

June 1, 2019 at 2:54pm
Thanks for the great info. I'm still new to Imba and don't know how the lib works, but I'll take a look anyway to the source and see if I can solve this.
  • reply
  • like