News for hackers. Stuff that matters.
Re:Learn SVG with 25 examples – How to code images in HTML by chrisfinazzo on Thursday December 07, 2023 @11:02AM (#38557878)
Very nice. It would be nice to see an example or two with text + an image, as this is the battle I'm currently fighting.

Alignment is a trip, let me tell you...

While I've played around with Inkscape, I'm definitely on the "writing XML" side of the fence in order to create what I need.

Re:Learn SVG with 25 examples – How to code images in HTML by HunorBorbely on Thursday December 07, 2023 @11:06AM (#38557951)
With text I wasn't experimenting too much, apart from the example where it follows a line.

I know there is text anchor: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/t...

And someone suggested the foreignObject tag that might be useful here: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/for...

Re:Learn SVG with 25 examples – How to code images in HTML by chrisfinazzo on Thursday December 07, 2023 @03:53PM (#38561686)
While most of the SVG text examples I've seen have a "word art" type of feel to them, I was mostly thinking it would be nice to show another common use case.

Recently, I've been using Standard Ebooks' toolkit to convert my Master's Defense into EPUB. SE uses SVG as its image format for covers - along with a few scaled JPGs. Unsurprisingly, all of this starts out as text and there is extensive use of text-anchor to get the alignment right.

Although they use XHTML as the primary input format, foreignObject is a concept I haven't encountered before, might be worth checking out...

https://standardebooks.org/contribute/producing-an-ebook-ste...

Re:Learn SVG with 25 examples – How to code images in HTML by mauvehaus on Thursday December 07, 2023 @11:27AM (#38558303)
Oh man, text is definitely a hassle. I ginned up some Python code to generate a table with svgwrite[0] and getting text where I wanted it was hell. I ended up just fudging a bunch of stuff and calling it close enough. I second the request for an example with non-trivial text positioning.

[0] GitHub link in profile.

Re:Learn SVG with 25 examples – How to code images in HTML by omoikane on Thursday December 07, 2023 @12:55PM (#38559480)
> Alignment is a trip

Inkscape's alignment functions works for me. For things where I needed more precision, what I do is press ctrl+shift+x and type in the coordinates there. (Inkscape's XML editor seem to crash very often for me, but it's workable if I remember to save after every edit).

Re:Learn SVG with 25 examples – How to code images in HTML by chrisfinazzo on Thursday December 07, 2023 @03:59PM (#38561749)
I suspect my frustration here is that although Inkscape's controls sort of look like Word or any number of other word processors, since it can modify a document's underlying XML, it requires keeping both paradigms in your head as you work.

I know people use it and like it, but in trying to get something done in a way that would save time, this approach didn't really click for me.