Skip to content

Conversation

@L33TSP34KER
Copy link

ui_lib

This is a library designed to generate SVG on-the-fly or at runtime. Now, users can create dynamic SVGs using this library more easily and with greater flexibility. Here's an example usage:

But like Guillaume said, you can inject JavaScript, but this isn't a security flaw of the library; rather, it's related to Gnoweb.
because anyone can simply create an SVG with JavaScript and make an Realm, regardless of my library

example

func Render() string {
	canvas := svg.NewSvgCanvas(400, 200, "300,200,400,400", "", nil,
		svg.NewSvgCircle(100, 100, 50, "#FF0000", "", nil),
		svg.NewSvgRect(150, 150, 100, 80, 10, "#00FF00", "example-class", svg.NewSvgCircle(100, 100, 50, "#FF0000", "", nil)),
	)

	return canvas.Render()
}

@vikbez
Copy link

vikbez commented Nov 26, 2025

I think your implementation is not very easy to use,
And what you're doing is illegal from the svg spec 😄
You should not use rectangles as containers for children shapes.
Only some elements can be containers: g, svg, etc.. see https://www.w3.org/TR/SVG/struct.html#TermContainerElement

Did you make your package because something was wrong with p/demo/svg ?

By reviewing gnomod.toml I also see that package and folder name differs (ui_lib vs svg)

I would also add these standard primitives as they're often used: line, polygon, path

And also some example and test file would be nice !


After thinking about all of this I'd prefer to use something like this :

func Render() string {
    return svg.Canvas().
        Size(400, 200).
        ViewBox("300,200,400,400").
        Add(svg.Circle().At(100, 100).Radius(50).Color("#FF0000")).
        Add(svg.Rect().At(150, 150).Size(100, 80).Rounded(10).Color("#00FF00").Class("example-class")).
        Add(svg.Circle().At(100, 100).Radius(50).Color("#FF0000")).
        Render()
}

If you want grouping, you should be able to do it with official p/demo/svg lib like this:

func Render() string {
      canvas := svg.Canvas{Width: 400, Height: 200, ViewBox: "300 200 400 400"}
      group := svg.Group{Attr: svg.BaseAttrs{Class: "example-class"}}
      group.Append(
          svg.Rectangle{X: 150, Y: 150, Width: 100, Height: 80, RX: 10, RY: 10, Fill: "#00FF00"},
          svg.Circle{CX: 100, CY: 100, R: 50, Fill: "#FF0000"},
      )
      canvas.Append(
          svg.Circle{CX: 100, CY: 100, R: 50, Fill: "#FF0000"},
          group,
      )
     return canvas.String()
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants