[elm-discuss] ANN: TypedSvg

[Duane Johnson]

Hi all,

I've been working on a TypedSvg package here:

http://package.elm-lang.org/packages/canadaduane/typed-svg/2.0.1

Its intent is to replace `elm-lang/svg` with a fully typed and documented
SVG package. There's still a lot of work to do (the SVG spec is huge) but
I'm pretty happy with the progress that's been made. I'm announcing this
now so that if others are interested in a similar package, we can
consolidate effort and help one another rather than duplicate effort.

Thanks,
Duane Johnson

['Rupert Smith' via Elm Discuss]

Post by Duane Johnson
Hi all,
http://package.elm-lang.org/packages/canadaduane/typed-svg/2.0.1
Its intent is to replace `elm-lang/svg` with a fully typed and documented
SVG package. There's still a lot of work to do (the SVG spec is huge) but
I'm pretty happy with the progress that's been made. I'm announcing this
now so that if others are interested in a similar package, we can
consolidate effort and help one another rather than duplicate effort.

Sound interesting and good timing for me as my next project will involve
lots of diagrams and SVG seems the most likely way to render them. Can you
explain what the deficiencies of elm-lang/svg are that you are aiming to
improve on?

[Noah Gordon]

elm-lang/svg does not provide any strong typing for its functions; it's a
direct exposure of SVG's API, and all of its functions take strings as
arguments. An incorrectly-formatted string will not break your application
but will fail to render as you might expect. It looks like this library is
trying to be more prescriptive about the data types you can use to
construct SVGs. For example, "viewBox" takes four numbers as opposed to a
string with four space-separated values. With elm-lang/svg, providing "0 0
0 foo" will compile but fail to render properly; with this library, it
won't compile.

This also means you don't need to manually coerce numbers to strings any
more when working with coordinates in your model that are stored as numbers!

Duane, I've been waiting for something like this for a while. Thanks for
undertaking the tedium of translating the entire SVG spec and giving it a
nice, typed interface. Will take a closer look when I get a chance.

Post by 'Rupert Smith' via Elm Discuss

Post by Duane Johnson
Hi all,
http://package.elm-lang.org/packages/canadaduane/typed-svg/2.0.1
Its intent is to replace `elm-lang/svg` with a fully typed and documented
SVG package. There's still a lot of work to do (the SVG spec is huge) but
I'm pretty happy with the progress that's been made. I'm announcing this
now so that if others are interested in a similar package, we can
consolidate effort and help one another rather than duplicate effort.

Sound interesting and good timing for me as my next project will involve
lots of diagrams and SVG seems the most likely way to render them. Can you
explain what the deficiencies of elm-lang/svg are that you are aiming to
improve on?

[Rex van der Spuy]

Post by Noah Gordon
Duane, I've been waiting for something like this for a while. Thanks for
undertaking the tedium of translating the entire SVG spec and giving it a
nice, typed interface. Will take a closer look when I get a chance.

Yeah, it's really great, thanks!

['Rupert Smith' via Elm Discuss]

Post by Noah Gordon
elm-lang/svg does not provide any strong typing for its functions; it's a
direct exposure of SVG's API, and all of its functions take strings as
arguments. An incorrectly-formatted string will not break your application
but will fail to render as you might expect. It looks like this library is
trying to be more prescriptive about the data types you can use to
construct SVGs. For example, "viewBox" takes four numbers as opposed to a
string with four space-separated values. With elm-lang/svg, providing "0 0
0 foo" will compile but fail to render properly; with this library, it
won't compile.
This also means you don't need to manually coerce numbers to strings any
more when working with coordinates in your model that are stored as numbers!
Duane, I've been waiting for something like this for a while. Thanks for
undertaking the tedium of translating the entire SVG spec and giving it a
nice, typed interface. Will take a closer look when I get a chance.

Sounds good. I will start using it very soon, that will be the best way to
understand what it is and where it is at.

[Eelco Hoekema]

Post by Duane Johnson
Hi all,
http://package.elm-lang.org/packages/canadaduane/typed-svg/2.0.1
Its intent is to replace `elm-lang/svg` with a fully typed and documented
SVG package. There's still a lot of work to do (the SVG spec is huge) but
I'm pretty happy with the progress that's been made. I'm announcing this
now so that if others are interested in a similar package, we can
consolidate effort and help one another rather than duplicate effort.
Thanks,
Duane Johnson

Thanks! Much appreciated.

eelco

[Magnus Rundberget]

Nice !

-magnus

Post by Duane Johnson
Hi all,
http://package.elm-lang.org/packages/canadaduane/typed-svg/2.0.1
Its intent is to replace `elm-lang/svg` with a fully typed and documented
SVG package. There's still a lot of work to do (the SVG spec is huge) but
I'm pretty happy with the progress that's been made. I'm announcing this
now so that if others are interested in a similar package, we can
consolidate effort and help one another rather than duplicate effort.
Thanks,
Duane Johnson

[Nicholas Hollon]

This is awesome! Something I've wished for since about 5 minutes after I
started learning elm-svg.

Will definitely be adopting it for future projects... possibly sending
some pull requests along the way. :-)

Post by Duane Johnson
Hi all,
http://package.elm-lang.org/packages/canadaduane/typed-svg/2.0.1
Its intent is to replace `elm-lang/svg` with a fully typed and documented
SVG package. There's still a lot of work to do (the SVG spec is huge) but
I'm pretty happy with the progress that's been made. I'm announcing this
now so that if others are interested in a similar package, we can
consolidate effort and help one another rather than duplicate effort.
Thanks,
Duane Johnson

[Duane Johnson]

Thanks for the kind words everyone. Yes, please send pull requests to the
main repo and I will integrate them.

The short term goal is to make a typed SVG library (as mentioned earlier,
fully typed and documented). Medium-term, I'd like to adopt some sensible
module partitions that help segregate functionality into logical units
(e.g. core graphics, animations, filters). The long term goal is to create
a pleasant and intuitive SVG library, something that will come from seeing
how we all use this in practice.

For instance, one idea I've had is to create core graphics modules that
"assume" a length such as `px` or `em`. I've noticed when I create scalable
vector graphics, I typically measure everything in the same units, so it
doesn't make sense to specify units all over the place.

As an example, right now you need the following `px` helper methods to
express unit of length:

{
import TypedSvg.Attributes exposing (x, y, width, height, strokeWidth)

rect
[ x (px 150)
, y (px 150)
, width (px 200)
, height (px 200)
, fill Color.black
, strokeWidth (px 2)
, stroke <| Color.rgba 90 60 60 0.5
]
[]
}

I'd rather be able to forego the `px`:

{
import TypedSvg.Attributes.InPx exposing (x, y, width, height,
strokeWidth)

rect
[ x 150
, y 150
, width 200
, height 200
, fill Color.black
, strokeWidth 2
, stroke <| Color.rgba 90 60 60 0.5
]
[]
}

Anyway, just some of my current thinking. Other thoughts and ideas welcome.

Duane

Post by Nicholas Hollon
This is awesome! Something I've wished for since about 5 minutes after I
started learning elm-svg.
Will definitely be adopting it for future projects... possibly sending
some pull requests along the way. :-)

Post by Duane Johnson
Hi all,
http://package.elm-lang.org/packages/canadaduane/typed-svg/2.0.1
Its intent is to replace `elm-lang/svg` with a fully typed and documented
SVG package. There's still a lot of work to do (the SVG spec is huge) but
I'm pretty happy with the progress that's been made. I'm announcing this
now so that if others are interested in a similar package, we can
consolidate effort and help one another rather than duplicate effort.
Thanks,
Duane Johnson
--

You received this message because you are subscribed to the Google Groups
"Elm Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an
For more options, visit https://groups.google.com/d/optout.

['Rupert Smith' via Elm Discuss]

Post by Duane Johnson
The short term goal is to make a typed SVG library (as mentioned earlier,
fully typed and documented). Medium-term, I'd like to adopt some sensible
module partitions that help segregate functionality into logical units
(e.g. core graphics, animations, filters). The long term goal is to create
a pleasant and intuitive SVG library, something that will come from seeing
how we all use this in practice.

What are the immediate todos that need worked on? Is there a list of issues
on the github project, for example?

I've set myself up an elm-reactor project to start having a play around
with it. Will be aiming to render some of the various diagrams I need, and
happy to start filling in the blanks once I run off the end of the road...

[Duane Johnson]

On Thu, Apr 6, 2017 at 8:03 AM, 'Rupert Smith' via Elm Discuss <

Post by 'Rupert Smith' via Elm Discuss

Post by Duane Johnson
The short term goal is to make a typed SVG library (as mentioned earlier,
fully typed and documented). Medium-term, I'd like to adopt some sensible
module partitions that help segregate functionality into logical units
(e.g. core graphics, animations, filters). The long term goal is to create
a pleasant and intuitive SVG library, something that will come from seeing
how we all use this in practice.

What are the immediate todos that need worked on? Is there a list of
issues on the github project, for example?

That's a good idea. I should write that up. For now, here's what I'm
thinking:

- separate out the Animation elements and attributes into their own module
- continue to add length-unit-specific modules like InPx and InEm (InPt,
InMm, etc.)
- move `text` element from Core to regular elements (TypedSvg)
- fill in missing documentation on all elements and attributes
- add helpful functions as we go to the TypedSvg.Extra module (currently
only `centeredImage` resides there)

Post by 'Rupert Smith' via Elm Discuss
I've set myself up an elm-reactor project to start having a play around
with it. Will be aiming to render some of the various diagrams I need, and
happy to start filling in the blanks once I run off the end of the road...

Awesome! I look forward to your feedback and help.

Duane

['Rupert Smith' via Elm Discuss]

Post by Duane Johnson
On Thu, Apr 6, 2017 at 8:03 AM, 'Rupert Smith' via Elm Discuss <

Post by 'Rupert Smith' via Elm Discuss
What are the immediate todos that need worked on? Is there a list of
issues on the github project, for example?

That's a good idea. I should write that up. For now, here's what I'm
- separate out the Animation elements and attributes into their own module
- continue to add length-unit-specific modules like InPx and InEm (InPt,
InMm, etc.)
- move `text` element from Core to regular elements (TypedSvg)

These things sound fairly structural, so perhaps best left to you to do, as
you have the vision for it.

Post by Duane Johnson
- fill in missing documentation on all elements and attributes
- add helpful functions as we go to the TypedSvg.Extra module (currently
only `centeredImage` resides there)

These sound more like the things that I could contribute to at the moment.
I see lots of empty doc comments. :-)

[Duane Johnson]

Post by 'Rupert Smith' via Elm Discuss

Post by Duane Johnson
- separate out the Animation elements and attributes into their own module
- continue to add length-unit-specific modules like InPx and InEm (InPt,
InMm, etc.)
- move `text` element from Core to regular elements (TypedSvg)

These things sound fairly structural, so perhaps best left to you to do,
as you have the vision for it.

Sounds quite reasonable :)

Post by 'Rupert Smith' via Elm Discuss
- fill in missing documentation on all elements and attributes

Post by Duane Johnson
- add helpful functions as we go to the TypedSvg.Extra module (currently
only `centeredImage` resides there)

These sound more like the things that I could contribute to at the moment.
I see lots of empty doc comments. :-)

Perfect!

Thanks,
Duane

['Rupert Smith' via Elm Discuss]

Post by Duane Johnson
Sounds quite reasonable :)

Post by Duane Johnson
- fill in missing documentation on all elements and attributes

Post by Duane Johnson
- add helpful functions as we go to the TypedSvg.Extra module (currently
only `centeredImage` resides there)

These sound more like the things that I could contribute to at the
moment. I see lots of empty doc comments. :-)

Not much progress with this recently, sorry. But starting to look at it
again today and I am back to work this week. I'm just trying to render some
simple diagrams with boxes and text and arrows and such-like.

The way you put text in a diagram is a bit strange, as you use
"TypedSvg.text_" to render the <text> node but then "TypedSvg.Core.text" to
insert the actual text. So that is how SVG works but I think perhaps a
helper function could make it nicer.

[Duane Johnson]

On Mon, Apr 17, 2017 at 4:49 AM, 'Rupert Smith' via Elm Discuss <

Post by 'Rupert Smith' via Elm Discuss
Not much progress with this recently, sorry. But starting to look at it
again today and I am back to work this week. I'm just trying to render some
simple diagrams with boxes and text and arrows and such-like.

Great!

Post by 'Rupert Smith' via Elm Discuss
The way you put text in a diagram is a bit strange, as you use
"TypedSvg.text_" to render the <text> node but then "TypedSvg.Core.text" to
insert the actual text. So that is how SVG works but I think perhaps a
helper function could make it nicer.

Yeah, I think that's reasonable. Would it make sense to have:

`text : List (Attribute msg) -> String -> Svg msg`
a helper method that takes attributes and a string, and returns a text node
with text

`textNode : List (Attribute msg) -> List (Svg msg) -> Svg msg`
what is now "text_"

`textContent : String -> Svg msg`
what is now "text"

The reason I think it makes sense to use the more-desirable "text" method
as the helper itself is because I can't think of a use case where you'd
want to add anything other than one piece of text content inside a text
node. And if there is such a use case, it seems obscure. So that makes me
want to make the short and concise function the one that is most useful,
and the more verbose ones used in rare cases.

Duane

[Jakub Hampl]

https://developer.mozilla.org/en-US/docs/Web/SVG/Element#Text_content_elements

<text> elements can contain quite a number of children that allow you to do
very precise formatting of the actual text content. There are plenty of
usecases like custom fonts, rendering text on a path, text effects, etc.

However having the thing that inserts a text node called text when there
exists also a text element is confusing. Also text nodes are much rarer in
practice in SVG than in HTML, so using a longer function name would make
sense.

I think textNode : String -> Svg msg would make sense and make text : List
(Attribute msg) -> List (Svg msg) -> Svg msg would make sense.

Post by Duane Johnson
On Mon, Apr 17, 2017 at 4:49 AM, 'Rupert Smith' via Elm Discuss <

Post by 'Rupert Smith' via Elm Discuss
Not much progress with this recently, sorry. But starting to look at it
again today and I am back to work this week. I'm just trying to render some
simple diagrams with boxes and text and arrows and such-like.

Great!

Post by 'Rupert Smith' via Elm Discuss
The way you put text in a diagram is a bit strange, as you use
"TypedSvg.text_" to render the <text> node but then "TypedSvg.Core.text" to
insert the actual text. So that is how SVG works but I think perhaps a
helper function could make it nicer.

`text : List (Attribute msg) -> String -> Svg msg`
a helper method that takes attributes and a string, and returns a text
node with text
`textNode : List (Attribute msg) -> List (Svg msg) -> Svg msg`
what is now "text_"
`textContent : String -> Svg msg`
what is now "text"
The reason I think it makes sense to use the more-desirable "text" method
as the helper itself is because I can't think of a use case where you'd
want to add anything other than one piece of text content inside a text
node. And if there is such a use case, it seems obscure. So that makes me
want to make the short and concise function the one that is most useful,
and the more verbose ones used in rare cases.
Duane

['Rupert Smith' via Elm Discuss]

Post by Jakub Hampl
https://developer.mozilla.org/en-US/docs/Web/SVG/Element#Text_content_elements
<text> elements can contain quite a number of children that allow you to
do very precise formatting of the actual text content. There are plenty of
usecases like custom fonts, rendering text on a path, text effects, etc.

Yes. I suspected this might be the case.

Perhaps it is more often the case than the simple situation of inserting a
<text>hello</text> is?

How about this for the signature for a text node:

text : List (Attribute msg) -> List (Svg msg) -> String -> Svg msg

Lets you specify the actual text as a String, and you can supply empty
lists if you don't need any attributes or other Svg elements?

[Jakub Hampl]

Think of the <text> element akin to the <p> element in HTML. Yes, fairly
often you will simply pass a string to it, but it needing lower level
styling is pretty common.

For the API you proposed, what would happen if you passed in both a
non-empty list of svgs and a string?


RE: strokeWidth - that's a bug, the attribute is actually called
stroke-width
<https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width>.

Post by 'Rupert Smith' via Elm Discuss

Post by Jakub Hampl
https://developer.mozilla.org/en-US/docs/Web/SVG/Element#Text_content_elements
<text> elements can contain quite a number of children that allow you to
do very precise formatting of the actual text content. There are plenty of
usecases like custom fonts, rendering text on a path, text effects, etc.

Yes. I suspected this might be the case.
Perhaps it is more often the case than the simple situation of inserting a
<text>hello</text> is?
text : List (Attribute msg) -> List (Svg msg) -> String -> Svg msg
Lets you specify the actual text as a String, and you can supply empty
lists if you don't need any attributes or other Svg elements?

['Rupert Smith' via Elm Discuss]

Post by Jakub Hampl
RE: strokeWidth - that's a bug, the attribute is actually called
stroke-width
<https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width>.

Yes, thought that might be it. I'll create github issues for bugs that I
spot from now on.

Which way is preferable for styling SVG? CSS or attributes? Is it desirable
for the API to abstract this away and just present one way of doing it, or
best to expose the guts of it and let the user choose?

[Duane Johnson]

I'm hoping this library is not too much of an abstraction, more of a typed
1:1 mapping. With a layer like this established, it would be easier to
build a library on top.

That said, I'm not opposed to adding convenient helper functions where
needed.

On Apr 18, 2017 1:02 PM, "'Rupert Smith' via Elm Discuss" <

Post by 'Rupert Smith' via Elm Discuss

Post by Jakub Hampl
RE: strokeWidth - that's a bug, the attribute is actually called
stroke-width
<https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width>
.

Yes, thought that might be it. I'll create github issues for bugs that I
spot from now on.
Which way is preferable for styling SVG? CSS or attributes? Is it
desirable for the API to abstract this away and just present one way of
doing it, or best to expose the guts of it and let the user choose?
--
You received this message because you are subscribed to the Google Groups
"Elm Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an
For more options, visit https://groups.google.com/d/optout.

['Rupert Smith' via Elm Discuss]

Post by Duane Johnson
I'm hoping this library is not too much of an abstraction, more of a typed
1:1 mapping. With a layer like this established, it would be easier to
build a library on top.
That said, I'm not opposed to adding convenient helper functions where
needed.

Ok, makes sense. Walk before we fly.

[Duane Johnson]

Post by Jakub Hampl
Think of the <text> element akin to the <p> element in HTML. Yes, fairly
often you will simply pass a string to it, but it needing lower level
styling is pretty common.
For the API you proposed, what would happen if you passed in both a
non-empty list of svgs and a string?

Do you happen to have an example of the <text> element in use as a parent
node of several child nodes? Up to this point, I've simply used it as a
"label"-like feature of my SVG graphics, where the attributes of the <text>
element have sufficed to place a single line or label in the correct
location, with the right color etc.

[Jakub Hampl]

https://codepen.io/anon/pen/gWrbxr

Post by Duane Johnson

Post by Jakub Hampl
Think of the <text> element akin to the <p> element in HTML. Yes, fairly
often you will simply pass a string to it, but it needing lower level
styling is pretty common.
For the API you proposed, what would happen if you passed in both a
non-empty list of svgs and a string?

Do you happen to have an example of the <text> element in use as a parent
node of several child nodes? Up to this point, I've simply used it as a
"label"-like feature of my SVG graphics, where the attributes of the <text>
element have sufficed to place a single line or label in the correct
location, with the right color etc.

['Rupert Smith' via Elm Discuss]

Post by Jakub Hampl
https://codepen.io/anon/pen/gWrbxr

Very nice. And I see your point - you have multiple strings within a single
<text> node. Perhaps my suggestion of a help function that takes a single
String is not so useful.

['Rupert Smith' via Elm Discuss]

Post by Duane Johnson
Hi all,
http://package.elm-lang.org/packages/canadaduane/typed-svg/2.0.1

So I tried setting a strokeWidth attribute on a box and on a line, but it
has no effect. Instead I had to set the style like this:

style [ ( "stroke-width", "4" ) ]

All the examples given here use css styling:

https://www.w3schools.com/graphics/svg_line.asp

Not sure what is going on as I don't actually know SVG, this is really my
first time to work with it programmatically (I've made plenty SVG drawing
in Inkscape and imported them into HTML previously). Seting the
"strokeWidth" attribute sets a "strokeWidth" attribute on the SVG node, but
Chrome seems to ignore it. Are these attributes deprecated in favour of CSS
styling or something?

In which case styling attributes that need to be represented as CSS need to
be handled differently when rendering the nodes.

[Duane Johnson]

On Tue, Apr 18, 2017 at 6:52 AM, 'Rupert Smith' via Elm Discuss <

Post by 'Rupert Smith' via Elm Discuss
So I tried setting a strokeWidth attribute on a box and on a line, but it
style [ ( "stroke-width", "4" ) ]

Thanks (and thanks to Jakub). Fixed in 2.1.1:

https://ellie-app.com/X7DYKGwFh4a1/4