
Me and SVG - bootload
http://codepen.io/AmeliaBR/post/me-and-svg
======
bdrool
It really makes me sad to read the part about counting pennies and having to
stretch such tiny advances while writing the books, especially when she
describes her frustration at how much a framed copy that was sent by the
publisher must have cost, compared to her frugal situation. It is a shame that
writing down useful knowledge in a clear way is not better rewarded.

~~~
Mz
I wish more people on HN felt this way. I often see the opposite attitude
expressed here towards writers: That it is not the audience's problem whether
or not the writer eats. They should pick a different job if that sort of thing
matters to them. (Granted, this is typically in discussions about _online_
content, but I think it is kind of a class divide thing. Programmers seem to
often not get how fortunate and well paid they really are.)

~~~
averagewall
Guitar and video game players aren't well paid either. But they don't expect
to be - they do it for fun.

Isn't that fair though? Writers could do it for fun and give away their work
for free. Or they could get a job doing what the market wants and not enjoy it
so much but get paid more. It's very much the same situation for programmers
except programmers don't have the expectation that their work must be worth
money just because they spent a lot of time on it. That's life for most people
- our hobbies aren't usually worth as much money as our less enjoyable jobs.

~~~
bootload
_" Isn't that fair though? Writers could do it for fun and give away their
work for free."_

No.

When I read this I think of Bruce Perens and BusyBox. [0] BusyBox, created by
Perens as a floppy rescue/boot/installer disk for Debian, written as a single
binary. [1],[2] Real handy if your partition failed or you needed to install
an OS or update.

This didn't stop unscrupulous companies installing BusyBox charging for it and
violating the GPL licensing agreements. [3] At no time did these companies
chip in to help in the development of BB. Yet they wanted (needed) the
inclusion of this useful software.

This is HN, a place where smart people hang out at the intersection of
technology and commerce. I posted the article as an experiment to see what
possible commercial possibilities could be imagined.

    
    
        SVG is too important to the web
        to let it whither and die.
    

There must be some other way to continue this kind of work sustainably. What
else can you think up?

Reference

[0]
[https://en.wikipedia.org/wiki/BusyBox](https://en.wikipedia.org/wiki/BusyBox)

[1] [https://busybox.net/about.html](https://busybox.net/about.html)

[2] [https://busybox.net/oldnews.html](https://busybox.net/oldnews.html)

[3]
[https://en.wikipedia.org/wiki/BusyBox#GPL_lawsuits](https://en.wikipedia.org/wiki/BusyBox#GPL_lawsuits)

~~~
greggman
I don't see what this has to do with the argument that "Writers could do it
for fun and give away their work for free."

You can argue the point 2 ways

1\. Bruce Perens did BusyBox for fun and gave it away for free. After words
some people were bad and got sued. So what does his making it for fun and free
have to do with after words people got sued

2\. Bruce Perens did Busybox and fun and gave it away not for free. His price
is that if you it in a product (or portions of it, details don't matter to the
point) that product (or portions of it) must also be GPLed.

If you take this interpretation then we're back to the same thing, what does
this story have to do with "Writers could do it for fun and give away their
work for free."

~~~
Freak_NL
> After words […]

Do you mean 'afterwards' or 'after an altercation took place'?

~~~
jeron
I think he meant the former.

------
bisRepetita
I want to be a journalist=> I can't travel => graphics can be my niche => SVG
is interesting => this competition is for me => I fail stupidly => I blog and
show my stuff => This book needs serious help, I am not counting my time => Oh
oh, i am a published author, this is weird => I worked so hard, 5 books! =>
Expert on W3C commitee => Seriously, I am THE freaking expert in this
field!!=> More hard work, a lot => Oh shit, people are not interested in this
stuff anymore => What am I doing with my life????

This is a beautiful story. Thanks for sharing so well.

~~~
nsebban
The whole story could have a way better outcome if you replace SVG with an
area of expertise that helps companies create value :/

~~~
Latty
I feel like SVG is currently more important than ever - it's a much easier
solution to the problem of display density which is currently rearing its head
again in light of phones and other high-density displays.

------
dahart
It bums me out to hear SVG is in such limbo, I've been looking forward to SVG
1.2 support. It seems to be taking a long time, I guess this is why.

It's strange because I know many many companies are using SVG at least a bit
for their sites. Maybe it's simmering just under the threshold where it seems
necessary to have to do business, but so many sites would be hosed if SVG
suddenly went away.

Is part of the problem authoring tools? Every time I need to make some SVG by
hand, I look around and keep coming back to Inkscape and Illustrator. I can't
afford Illustrator, and Inkscape has just never stuck for me, it feels very
clunky. I've used lots of the other tools out there but nothing seems great.

~~~
guitarbill
> Is part of the problem authoring tools? Every time I need to make some SVG
> by hand, I look around and keep coming back to Inkscape and Illustrator. I
> can't afford Illustrator, and Inkscape has just never stuck for me, it feels
> very clunky. I've used lots of the other tools out there but nothing seems
> great.

I totally get this. I don't have Illustrator, but occasionally I get
Illustrator produced SVGs and they remind me of HTML produced by early 2000
Word.

And I hate Inkscape with a passion, mostly the UI. I like exact coordinates
for doing technical diagrams, and Inkscape seems to make that really hard. I
have no issues with UIs that have a learning curve, and have previously gotten
used to InDesign and Blender fine. But it seems like I'm fighting Inkscape all
the way, only to have the output be of low quality.

What I actually use now is TikZ in LaTeX + dvisvgm, which I then pipe through
SVGO. Super happy with the results, although writing TikZ isn't exactly smooth
either. And LaTeX is a whole different world of pain and annoyance, so using
it for just SVG seems wrong. But TikZ/PGF is pretty mature, and dvisvgm has a
great, clean code base.

~~~
hahamrfunnyguy
I started out doing vector based illustration in Illustrator and have been
using Inkscape for probably 16 years now. I really like Inkscape for the
performance and simplicity of it. It's also got a bunch of features I've come
to enjoy, like specifying exact positions for guides, and guides on angles.
The menus and tool pallets kind of suck, but I don't use those anyway. Really
from what I've seen in the industry, most designers are heavy keyboard users
and aren't clicking around on menus to do stuff. It takes too long!

The only big drawback for me is that it doesn't support CMYK color, so when I
need something printed I bring it in to Illustrator and make sure my colors
are mapped to the appropriate CMYK colors.

~~~
ygra
> The only big drawback for me is that it doesn't support CMYK color

This has been painful for me. As a side project I made a card game and
produced the cards in SVG as a template (handwritten, but I use Inkscape to
convert to PDF/PNG, so Inkscape has to render it correctly), a CSV file for
all text content that should appear in it, and some scripting. SVG has been
awesome for that, as it's a vector graphics format that's very easy to
programmatically modify.

But when it comes to printing things you suddenly find yourself in a world
where RGB is downright painful. Slightly off colours, wrong black tones (RGB
black is blacker than CMYK black, so it's always mixed with colours). It
probably wouldn't matter much with photos, but text and shapes are very
affected.

So in the end we had to take Illustrator to the final PDF, convert to CMYK,
and make sure every last bit of black is CMYK(0,0,0,1). SVG as a web
technology only caters to sRGB as a colour space; there have been attempts at
standardising CMYK, and Batik had a half-finished implementation, I think. But
eventually both the standardisation efforts and the implementation were
pulled, IIRC.

------
JepZ
I think we (the web) chronically underestimate the importance of SVG. I mean
we all use pixel graphics (JPG, PNG, GIF) every day, build services to scale
images and have multiple formats for them have to admit, that they are not
100% perfect most of the time.

SVG, on the other hand, doesn't need 5 different versions of the same image
just to look okay on the receiving display. Even more, it always has 100%
quality on the receiving device. As far as I am concerned, there are only two
main problems with SVG:

1\. The creation is painful

2\. The renderer compatibility is too weak.

While creation problem has many layers, I think one thing that could be
improved is Inkscape usability. I spend the last months every now and then to
learn to handle Inkscape and the first steps were so painful (and I knew what
SVG is and was quite able to handle Gimp). I am sure if some usability experts
would be involved in its development, many things would be implemented
differently. And I really hope, someone will change that as Inkscape is such a
powerful tool which should be quite accessible to the majority of users.

Regarding the render compatibility, I think it is very important to fix that
in the near future. I have high hopes that SVG2 will help here, but I think it
is also our job as the web community to show the browser vendors, that we want
that fixed version of SVG.

~~~
Al-Khwarizmi
It's funny that some people say that about Inkscape usability. As a quite
graphically-challenged person, it's the only graphics program I have been able
to learn to an acceptable degree, and in an acceptable amount of time.
Fireworks, Corel Draw, GIMP, etc. look like impregnable fortresses for me and
I always end up using Inkscape.

Maybe people like me who are just bad at graphics have different needs.
Something like visual basic vs. real programming languages, I guess?

~~~
542458
> As a quite graphically-challenged person, it's the only graphics program I
> have been able to learn to an acceptable degree

As somebody who spends most of his workday in graphics software, inkscape is a
nightmare for me to use. And I think a lot of that is because it rejects a lot
of the pseudo-conventions enshrined in other graphics software that I have
burned into my muscle memory (shift to lock aspect ratio when scaling,
control-plus to zoom, double-click to enter a group, etc etc etc).

------
danso
The description of amount of work the author produced, including for the SVG 2
spec, reads like the CV of someone who has been with W3C since 1999 (which is
when W3C first started working on SVG according to Wikipedia). It's stunning
that the author only started self-learning web dev basics just 3.5 years ago.
Whatever she decides to do with SVG, I hope she can easily land a job in the
field despite her requirements to do remote work. She clearly has the
technical chops, communication skills, and perseverance that tech companies
value.

~~~
on_and_off
I am working on svg animations right now (on Android, but AFAIK it is pretty
much the same on the web).

Tooling is pretty poor at the moment, even though this is changing rapidly
with :

[https://romannurik.github.io/AndroidIconAnimator/](https://romannurik.github.io/AndroidIconAnimator/)

and

[https://shapeshifter.design/](https://shapeshifter.design/)

that are quickly starting to cover this ground (but they still need a lot of
work).

Animating an svg shape to another in a nice way has been doable for some time,
like for example : [https://material.uplabs.com/posts/animations-in-pocket-
casts](https://material.uplabs.com/posts/animations-in-pocket-casts)

Doing so is really time intensive though as soon as your shapes are not
trivial, especially since without these two recent tools, you are left with a
sheet of paper as your best instrument ..

I would have gladly paid 20 $ last year for a tool allowing me to efficiently
create such an animation.

~~~
cvarjas
Perhaps [http://snapsvg.io/](http://snapsvg.io/) could work for your use case?

~~~
on_and_off
nope, this only allows you to edit an svg with js code.

That's not applicable to another platform.

I need to modify the svgs themselves in order to make them morphable.

That's easier said than done since they need to contain the same instructions
in the same order (with only different parameters) and the transition cannot
be random.

------
Arathorn
SVG always reminds me of JS - a seemingly overcomplicated and slightly
ungainly technology that actually just turned out to be ahead of its time.

Back in the bad old days when you had to install the Adobe plugin to view it
at all, it was almost useless. But nowadays, almost all browsers have more
than adequate native support and it turns out that it's actually very useful
as a good way of doing declarative vector graphics (as opposed to the
immediate mode world of Canvas). I switched to using SVG for all artwork in my
apps about 2 years ago and haven't looked back once - there are no performance
issues; I can retheme them via CSS (if loaded as objects rathe than imgs),
they look perfect on arbitrary resolution displays, plus animation is trivial
when desired. Meanwhile libraries like D3 show just how powerful and
performant SVG can be.

So: given a choice between a custom library which implements some kind of
vector DOM on top of canvas, and having it baked into the native DOM of the
browser with decent performance, I know which I'd rather have.

The biggest problem I've seen in practice is when handling user generated SVGs
- the risk of vulnerabilities in the implementations; XSS attacks - and design
flaws like billion lol attacks. But such are the risks of using an expressive
language like HTML, SVG, or heaven forbid postscript or PDF :)

~~~
Arathorn
(that said - I just checked on the health of one of my favourite Mozilla SVG
bugs; the fact that it ignores baseline-shift so there's no simple way of
vertically centring text over (say) a line in order to draw something like an
arrow label. Sadly, 12 years and still open...
[https://bugzilla.mozilla.org/show_bug.cgi?id=308338](https://bugzilla.mozilla.org/show_bug.cgi?id=308338))

------
mxfh
The core of the problem to me, seems to be the absence of a widely supported
declarative low level 2D vector format to compile to, likely with closed arced
paths* as only vector primitives. (Point and Lines are 0 and 1 dimensional and
need to constructed anyway for display)

Full SVG just seems too high level to be implemented universally, especially
when sent in some form to a GPU for parallel evaluation.

Now have a moment of silence for _OpenVG_
[https://www.khronos.org/openvg/](https://www.khronos.org/openvg/)

Yet there is hope:

[http://w3.impa.br/~diego/projects/GanEtAl14/](http://w3.impa.br/~diego/projects/GanEtAl14/)

[https://graphics.cs.illinois.edu/sites/default/files/svgpu.p...](https://graphics.cs.illinois.edu/sites/default/files/svgpu.pdf)

[https://developer.nvidia.com/nv-path-
rendering](https://developer.nvidia.com/nv-path-rendering)

* hopefully compatible with Path2D API [https://developer.mozilla.org/en-US/docs/Web/API/Path2D/Path...](https://developer.mozilla.org/en-US/docs/Web/API/Path2D/Path2D)

~~~
taeric
How does Postscript not capture the "widely supported low level format?"

No, I assert that the problem is there is just not a need for serializing
vector graphics across the wire for the vast majority of people. Or of
authoring graphics in said fashion. Combined with the people best at creating
graphics typically best at doing so using a visual toolchain. Which lends
itself to the standard toolchain of Photoshop (or whatever application) and
just generally does not need to be programmed or to have "clean" output.

Indeed, most graphics are best created at the target resolution that they are
needed and using tools that are more akin to the metaphor of painting. See the
popularity of the Surface with artists. Now, try to make a program that you
interact with using paint brushes, but outputs "clean" vector commands.

If you succeed at that, you will be deserving of whatever computing awards you
can get.

~~~
mxfh
Meaning ever seen _PostScript_ rendered somewhere natively in a browser? In
the DTP world, the problem does indeed not exist in that way.

 _most graphics are best created at the target resolution_

This paradigm seems to become obsolete to me. With the present adoption rate
of HiDPI displays target ratios matter again, not pixels.

Basically were back with displays to the paradigms that print/layout had for
centuries and which where tackled in the digital realm before with the first
transition from low resolution raster to high resolution print in the mid-70s
to 80s with the inception of _PostScript_ and _Illustrator_ (the original core
of Adobe, John Warnock) and also _MetaFont_ by Knuth. We're currently in the
middle of another transition, now happening on-screen with the transition to
non-pixel based authoring for HiDPI displays.

Pixels as authoring targets will probably be seen as a transitional
technology/paradigm in a decade or less, placed neatly between paper and true
vector displays on one end and _Retina_ \+ type screens on the other recent
end of an interval spanning only one or two generations in retrospect.

In general things have improved a lot in the last 5 years, SVG is also simply
good enough for most things:
[https://news.ycombinator.com/item?id=6470908](https://news.ycombinator.com/item?id=6470908)

~~~
taeric
I wasn't saying pixel level creation. I just said target resolution creation.
In general, you design the screen you want. Using tools that let you draw,
with the constraint that it is at the resolution you desire.

Am I saying that vector graphics are not desirable? No. Just saying that that
is a by product of the tool. If you are making something that can scale up
perfectly, great. Most graphics don't. Pretty much period.

------
jancsika
So here's a question:

JSON is to XML what ___ is to SVG. What is in the blank?

There's just so much complexity in even the 1.1 spec.

Patterns, for example, are given the default of specifying the width and
height of the area to be repeated in objectBoundingBox units. But the
arbitrarily complex content has its units defined in terms of the userspace
units derived from the context in which the pattern itself is used.

Now, if you play around with patterns for a bit you can certainly figure out
the logic of those defaults. Most likely the author doesn't want the aspect
ratio of the pattern _content_ to change based on the width/height specified
for the pattern viewbox. Hence patternContentUnits defaults to
"userSpaceOnUse". On the other hand, the author likely wants to control the
total number of columns/rows that will be displayed. Hence patternUnits
defaults to "objectBoundingBox", where you can do the math for 1/width for
rows and 1/height for columns.

But then when you try to do actual work using those defaults-- say, filling a
rectangle with a pattern that displays four small circles as "nails" in the
corners of the rectangle-- it doesn't work. The patternUnits attribute isn't
expressive enough to let you specify a way to attach each pattern iteration to
a corner of the shape. You _can_ achieve that for a particular bounding box,
but it isn't easy. So the logical though complex default isn't particularly
expressive in practice, and the more sane, less expressive way to do patterns
requires non-default attributes.

I run into similar such problems with many of the SVG 1.1 features. There's an
incredible amount of complexity, but not a matching amount of expressivity
gained for it. Even something like grabbing or setting a value for
height/width/x/y is made more complex because the DOM is storing both a base
value and an additional value should the user happen to have specified
declarative animation on the element. But then declarative animation isn't
implemented in all browsers after all this time-- nor is it as easy to work
with as the burgeoning web animations API.

~~~
pavlov
_JSON is to XML what ___ is to SVG. What is in the blank?_

It's not exciting or clever, but HTML5 Canvas fills in that blank.

It'a a minimal API that was designed by Apple to be just good enough to make
Mac OS X 10.4 desktop widgets possible to implement in JavaScript. Canvas has
a straightforward mapping to the big platform 2D APIs -- CoreGraphics, Cairo,
Direct2D. The bitmap data interfaces are an ugly but in practice mostly
satisfactory escape hatch when you need to draw something the API doesn't
include.

Both SVG and CSS are failed specs in my mind due to what you succinctly
describe as "incredible complexity without matching expressivity". The
difference is that CSS doesn't have an alternative, so everyone tries to live
with it.

~~~
rspeer
HTML5 Canvas is the least accessible thing to be put on the Web since Flash.

If you render text inside a canvas element, you end up with a picture of text.
You can't screen-read it, you can't re-flow it, you can't even select it!

~~~
EdSharkey
That is taking quite a dim view of what you can achieve with browsers and
screen readers to make pages accessible.

The key is to decide whether your canvas is being used as a dynamic pixel
buffer or as a static image after it has been painted (akin to an img tag.) If
it's static, just supply alt text and you're accessible.

If you have a dynamic canvas, you can maintain a visually hidden div alongside
the canvas that you set to role="alert" aria-live="assertive". Add text to the
div as things happen in the canvas that describe the situation. Any screen
reader watching the page will read out the text live as you make updates.

There is always a way to do right by your users if you care, some things just
take more work than others.

~~~
BinaryIdiot
The problem is your proposal is that it's a bit of a hack.

So when you render with the canvas it's pretty raw, much like if you were
rendering a scene using native painting with a native language (SDL, OpenGL,
DirectX, etc). The typical pattern here is you setup an animation and,
sometimes, an update loop (though update loop is a little awkward with canvas
but I digress). These loops fire constantly to update the scene and repaint
everything.

When you bring the DOM into it the DOM doesn't work like that. The DOM is a
_completely different way to render_ everything.

So when do you move your DOM overlays onto the canvas? In the update loop?
Then control their display via the render loop? Now you have some trouble.
Depending on what you're doing to the DOM object may repaint the entire
window, not just your canvas. So now you have more overhead and you're losing
performance.

But wait it gets even more fun. While your canvas animations progress with
every `requestAnimationFrame` the DOM is different. The DOM won't get updated
until the next next tick if you're making changes in your render loop (so once
the current `requestAnimationFrame` ends then the DOM gets updated). Since the
DOM isn't updated in the same time you have to compensate for that. Also, if
you're updating positions in an update loop (pretty common) and you update DOM
properties here, now the DOM will be updated after the update loop is run and
before the next render loop. Either way if you run into performance slowdowns
this can become very noticeable.

Ultimately you're taking two very different ways of handling drawing and
you're trying to force them together to support accessibility. The better
solution would be to build more of these capabilities into the canvas and its
APIs itself.

~~~
EdSharkey
I guess what is a hack and what is not depends 1) on how much you expect the
browser vendors to do for you, and 2) on how tortured your code looks after
you get the effect you want from the browser.

I'll be first in line to call DOM, HTML, and CSS a hot mess and a frequent
head-scratcher. But, the WAI-ARIA architecture turned out very nicely. I don't
know about you, but I think the ability of the content creator to add metadata
to markup to explain aurally, and in context, what that markup means is
brilliant and inspired.

Equally inspired is the Web Content Accessibility Guidelines (WCAG)[1]. The
WCAG gives you the right way to think as a web developer about content and how
to be respectful of your users with disabilities and make a simulateously
navigable and content rich page for all users. It teaches you not only to
think about and cater to screen-reader (blind) users, but also low-vision
users, color blind users, mouse-only users, keyboard-only users, and
cognitively impaired users.

Here's what WCAG says about how to 'show' images to screen reader users, for
instance:

> 1.1.1 Non-text Content: All non-text content that is presented to the user
> has a text alternative that serves the equivalent purpose, except for the
> situations listed below. (Level A)

In the how to understand 1.1.1 section, it talks about canvas content like
yours and how it should be 'read' by screen readers:

> Sometimes content is primarily intended to create a specific sensory
> experience that words cannot fully capture. Examples include a symphony
> performance, works of visual art etc. For such content, text alternatives at
> least identify the non-text content with a descriptive label and where
> possible, additional descriptive text. If the reason for including the
> content in the page is known and can be described it is helpful to include
> that information.

What that basically says is that the user needs to be able to see to
experience the content, so just slap alt text on your canvas tag. As
unsatisfactory as that sounds to you and me, to a screen reader user, having
that alt text shows respect because without it the page doesn't make any sense
when it is read out to them by the screen reader - there's literally a big
blank spot conceptually where the canvas sits without the alt text. No, they
can't reasonably play your canvas game, but at least they understand that
something is there when they visit your page.

Now, what I was describing earlier was a canvas that is painted with text and
graphics that could conceivably be narrated to the screen reader user. (Maybe
a turn-based rogue-like, for instance.) In that case, I'd use WAI-ARIA
attributes to cause a visibly hidden div to be read by the screen reader
whenever I update its textual content. All your concerns about my div causing
the page to reflow and repaint are not valid because my content does not
affect flow or paints. Use something ninja like HTML5 Boilerplate's
visuallyhidden CSS class to make content 'appear' to screen reader software
but be completely hidden on the displayed page:

    
    
        .visuallyhidden {
            border: 0;
            clip: rect(0 0 0 0);
            clip-path: inset(50%);
            height: 1px;
            margin: -1px;
            overflow: hidden;
            padding: 0;
            position: absolute;
            width: 1px;
            white-space: nowrap; /* 1 */
        }
    

Have you ever played with a screen reader? It's kindof a trip to 'listen' to
your page read to you. Often, just with some simple markup ordering tweaks,
you can get a confusing page to read sensibly. The one I use for my testing is
open source and free, NVDA [2].

[1] [https://www.w3.org/TR/WCAG20/](https://www.w3.org/TR/WCAG20/)

[2] [https://www.nvaccess.org/](https://www.nvaccess.org/)

------
__s
I empathize. I feel like my work in implementing insurance programs & payday
loan portals is of low value to society, yet it pays the bills. Meanwhile I'd
much rather focus fully on my project to implement a WASM jit for Lua. That
has future potential alone due to WASM unicorns wanting to open up to being
useful as a JIT target

Sort of flies in the face of people thinking basic income will result in a
bunch of stay at home drunks

SVG is cool. Was really wanting SVG2 as in order to get wordwrap I'm embedding
HTML into the SVG which I'm embedding in HTML. openEtG uses SVG as an
alternate backend to cards/deck rendering (as opposed to <canvas>)

Deck SVG:
[http://etg.dek.im/deck/047130c6qq016u1036u30177o0177g027aq02...](http://etg.dek.im/deck/047130c6qq016u1036u30177o0177g027aq027dm017h7017k2057n8017q5017th0380g018pr.svg)

Card SVG: [http://etg.dek.im/card/56f.svg](http://etg.dek.im/card/56f.svg)

There's some issues in rendering interacting with the page's CSS. The card
back is rendered off a spritesheet, in the SVG I just offset it so that the
rest of the image is clipped away

Code:
[https://github.com/serprex/openEtG/blob/master/svg.js](https://github.com/serprex/openEtG/blob/master/svg.js)

If this seems off topic.. well I'm bad at being personal, & in response to a
personal blogpost, this is how I make a personal response

I was hoping to try get remote work with
[https://bocoup.com](https://bocoup.com) but unfortunately I'm also Canadian &
they're not open to being that remote. But I'm just some guy who made an open
source HTML5 CCG. Maybe they'd take closer consideration of you. Granted I
open with a salary of 25k CAD, don't know what you consider making due

~~~
daurnimator
Tell me more about your WASM lua jit.

Any feedback from my post here? [https://www.freelists.org/post/luajit/LuaJIT-
and-WebAssembly...](https://www.freelists.org/post/luajit/LuaJIT-and-
WebAssembly,6)

~~~
__s
[https://github.com/serprex/luwa](https://github.com/serprex/luwa)

Have a basic interpreter worked out, currently implementing tracing, no WASM
currently being output. I have some previous experience generating wasm tho:

[https://github.com/serprex/Befunge](https://github.com/serprex/Befunge)
[https://github.com/serprex/brainwebfuckassembly](https://github.com/serprex/brainwebfuckassembly)

I don't really care about interacting with DOM. I feel that something like
vDOM & working out a method to play nice with emscripten's ABI will have more
use for projects which want to run a wasm jit with the code being mostly in
WASM

lua.js seems promising on the not-wasm front. Possibility to allow coroutines
by implementing those on top of generators like I've done in my own
implementation

------
Safety1stClyde
SVG is a good example of an overflexible, overcomplex standard with too much
variety, too many options, too many different ways to do the same thing. The
huge flexibility makes it almost impossible to correctly and fully implement.

I'm not sure how it got this way, but it seems to be connected to the W3
consortium, which has many other instances of creating exceedingly complex,
difficult-to-implement standards.

~~~
dahart
Really? I feel like HTML & CSS have this problem _way_ worse than SVG...

~~~
Safety1stClyde
Yes, really.

> I feel like HTML & CSS have this problem way worse than SVG...

I don't want to be rude to you, but in my comment above, I wrote the
following:

> I'm not sure how it got this way, but it seems to be connected to the W3
> consortium, _which has many other instances of creating exceedingly complex,
> difficult-to-implement standards._

I don't want to be rude to you or hurt your feelings, but the W3 consortium
wrote the standards for HTML and CSS as well.

~~~
dahart
I did read your comment. I do know that the W3C worked on all of them. I
promise not take anything as rude as long as you're not trying to be rude. :)
You didn't really clarify why SVG is a particularly good example, or why
you're pointing a finger in the general direction of the W3C.

How much have you used SVG? If you agree that HTML & CSS are worse than SVG,
then what are you suggesting should be done about SVG?

Personally, I find SVG pleasant to use compared to trying to get layout to
work across different versions of browsers. Personally, I'd rather use SVG
than CSS, if I have a choice. I was questioning why you think SVG is a "good"
example of an overly complex API, relative to what seem like bigger & better
examples.

Pretty much _all_ standards are difficult to implement. Tiff is an example of
an image standard that almost nobody gets right, and it's _way_ smaller in
scope than HTML, CSS or SVG. It's also not made by the W3C. OpenGL is a
standard that is very complicated and nobody implements completely, not even
nVidia. There is a constant stream of complaints about it, and yet nothing
better has come along to supplant it.

Standards are standards because there are many groups of people with many
different, and changing, requirements using them. That's why they get complex.

Standards are always a disaster from the point of view of bystanders & people
not involved and unaware of the history of the standard. They're often a
disaster from the point of view of people working on them too, but sometimes
for different reasons.

In any case, the question on the table is what to do about it, that's what
Amelia is asking. There's no question: things would get worse, not better, if
we were to eliminate the SVG (or HTML or CSS) standards. There has to be a
proposal on the table to replace it with something better.

What do you propose?

~~~
Safety1stClyde
> Standards are standards because there are many groups of people with many
> different, and changing, requirements using them. That's why they get
> complex.

This doesn't correspond to the information I have about SVG. As far as I know,
W3 consortium rejected numerous proposals for a vector graphics standard and
created their own from scratch. But I was not sure of that, so I did a little
online research.

I found this page linked from Wikipedia:

[https://www.w3.org/Graphics/SVG/WG/wiki/Secret_Origin_of_SVG](https://www.w3.org/Graphics/SVG/WG/wiki/Secret_Origin_of_SVG)

> The SVG WG examined the general requirements and the various submissions,
> and decided to not 'develop' any of the submissions, but to develop a new
> language informed by, but not really based on, any of the submissions.

According to this page, they claim they invented it themselves, "not really
based on" any of the submissions.

I actually do not know if the other submissions there are as much of a muddle
as SVG, but I doubt it.

~~~
dahart
What's your point? That doesn't mean anything. Proposals for standards are
rejected all the time by all standards committees. You don't seem to
understand the reality of standards work, it is notoriously difficult.

What do you propose to do with SVG? Get rid of it? Replace it? With what?

~~~
Safety1stClyde
> Proposals for standards are rejected all the time by all standards
> committees.

and yet

> Standards are standards because there are many groups of people with many
> different, and changing, requirements using them.

So on the one hand they're rejecting whatever, and on the other hand they are
catering to all the different and changing requirements.

> What's your point?

I do not wish to seem rude but my point is "SVG is a good example of an
overflexible, overcomplex standard with too much variety, too many options,
too many different ways to do the same thing. The huge flexibility makes it
almost impossible to correctly and fully implement."

~~~
dahart
You don't seem rude, but you do you seem unwilling say something constructive.

Since Amelia isn't sure she wants to continue with SVG standards work, I
volunteer you to go and simplify and fix the SVG standard. You've stated your
opinion that it's too complex three times, so you must know what parts of it
can be cleaned up?

Go do it.

~~~
Safety1stClyde
How is that constructive, you are just being silly now.

~~~
jononor
For something constructive, need a suggestions for a solution, a way forward.
Pointing out problems is not the hard thing, solving or preventing the problem
is.

------
chrisgannon
As someone who is pushing what SVG can do in terms of interactivity and
animation I am saddened to see such a hard working and talented person person
like Amelia struggling like this. She has helped me on numerous occasion with
various issues over the years and her knowledge of SVG and its quirks and
foibles is extensive.

If anyone is questioning the relevance or flexibility of SVG or its ease of
use check my CodePen stuff - with a library like Greensock you can do almost
anything with SVG
[http://codepen.io/chrisgannon/](http://codepen.io/chrisgannon/)

------
wei_jok
Don't give up. SVG is a beautiful format for the web. People can see the
difference in quality.

------
guelo
I'm about 20 years into my career and what I would tell her is that I've
become an expert in and forgotten more technologies then I can remember. But
it's not a waste of time, somehow things from 20 years ago that seem like
completely useless knowledge still popup once in a while and inform my
decisions and make me a better engineer overall.

------
intrasight
I have been both super excited and super disappointed with SVG for about
fifteen years now. I too came into it as a dataviz practitioner. Ten years ago
I did a project where I generated system status diagrams directly out of SQL
Server using XSLT and SVG embedded into the engine. More recently my interest
has been resurrected since Power BI uses SVG and D3 for custom visualizations.
But the luke-warm browser support has always been discouraging. Same with
XSLT. And I guess all things with angle brackets these days.

------
shriphani
I don't have advice for you but I just want to say this is a stunning body of
work - congratulations.

~~~
geoffbrown2014
I agree and would also send a thank you to the original author for all her
hard work. I use SVG semi-regularly and appreciate the work involved.

~~~
shriphani
Indeed - svg allowed me to explore my artistic side (craft, carpentry etc). If
the author set up a patreon, I could donate or something.

------
sitkack
Microsoft, Google, Mozilla and the W3C should be paying this woman.

------
franze
I was (aiming to become) an SVG ninja around 2006 (the first coming of SVG in
the browser), coded stuff like
[http://web.archive.org/web/20070630201408/http://www.fragmen...](http://web.archive.org/web/20070630201408/http://www.fragmentarisch.net/svg/drawingboard.php)
( a kinda LOGO implementation in SVG) - you needed the adobe SVG viewer plugin
for IE at that time to use it. (don't look at the code, it was 2006!!!!)).

at one point I decided to stop my quest, mostly because

a) horrible buggy browser support at that time

b) the limitation and clunkiness of the format (it's XMLish after all)

so basically nowadays: same, same but different!

nowadays still use exported SVG for icons and logos of course, cause filesize.

------
a-guest
I suspect it is possible you would be able to monetize your SVG experience in
a more profitable way than an O'Reilly book by authoring an online course(s)
for vendors like Pluralsight, Frontend Masters, or similar companies?

------
hutzlibu
"But I hate working with broken tools.

Do I keep trying to fix it, or do I throw it away?"

At some point, I think we need a redesign for vectorgraphics on the web from
scratch, as I don't think SVG can really be "fixed" \- it is just too complex
and weird in the base.

But I guess no one is willing to spend much money on that right now, after the
core of svg finally works (mostly). And since it is there right now and
working, it won't go away so fast, as there is no alternative - yet.

So I would keep working with it, but maybe start to collect and share ideas on
how to do things nicely from scratch ...

~~~
aidos
I disagree. This is the classic, let's rebuild it from scratch blackhole.
You'd probably end up with much the same spec.

The one thing that does need to be done to svg is to work towards simplifying
it and depreciating some of the more edgy features. It's a really broad spec
that's complex to implement.

~~~
hutzlibu
Question, have you really worked with SVG? And have you seen, how other vector
graphics format are (better) implemented?

~~~
jononor
Which formats should I look at for something better?

~~~
hutzlibu
Well, I have to admit, that I can't really name much. It has been a
while(around 6 years), that I researched about it. I remember that I liked the
flash - text vector format much more, but it died out, when flash died.

------
staz
If companies have to pay the W3C and the W3C don't pays spec editors such as
her; where does that money go?

~~~
_delirium
The W3C does pay (some) people to work on specs, usually not on a contractual
basis though, just by hiring in priority areas. For example, some of the main
figures in the CSS, Web Accessibility, Web Payments, etc. groups are W3C
employees. There's a list of employees and what they work on here:
[https://www.w3.org/People/](https://www.w3.org/People/)

------
tannhaeuser
I've benefitted numerous times from AmeliaBB's answers on
StackOverflow/StackExchange and Sitepoint, and am really happy for the
opportunity to thank her very much for her work. Her authoritative answers
really stand out, and show a level of depth and comittment to the subject like
few others. Her book is now high an my reading list.

There's definitely something wrong with funding of web standardization work
(or lack thereof) though, that needs to be brought to public attention. The
WHATWG/W3C situation is unsustainable IMO.

------
devwastaken
One thing that could be done by somebody who knows the standard /really/ well,
is a proper SVG sanitizer/conformity enforcer. SVG is powerful, even in its
basic abilities, but all of the projects I've seen so far have no guarantees
of security or safe parsing. Its probably too niche currently, probably only
really useful for things like Mediawiki. But, I think having the ability for
users to upload .svg's like normal images onto sites would catch on pretty
quick.

------
scandox
Why don't most programmers buy programming books? Why doesn't the technology
industry have more respect for the foundational, vocational work being done
that supports it?

It's the Market I hear you cry. I'm damn tired of hearing that cop out. Maybe
you really believe it. Well that doesn't mean you don't have to take
responsibility.

These people support our money earning work every day. We need to find ways to
force our employers to put a value on that.

------
smrtinsert
It's tough. I think the appetite for SVG might have dissipated a bit since
devices properly scale and use alternatives such as canvas offer better
performance.

------
Kinnard
I bet a hackathon would do a ton of good for the SVG Ecosystem.

The social/community/ecosystem aspect of programming technologies should not
be neglected/ignored.

------
ensiferum
It's sad to hear that the author has had such a financially hard time while
working on those things. But the thing is that those books are not best
sellers. There are like 10 ppl in the world interested in SVG.

I'm sorry to say but also committing to a large chunks of work without any
contract for payment?? I can understand that you'd do it if you really a)
wanted to do it b) wanted the "fame" or the admiration of your peers but to
continue to work on while the teams around you are falling apart and not
giving a shit is just pointless. Maybe she wasn't able to read the state of
the project very well.

Anyway author if you read this, I'd say just scrap the SVG for now and pursue
other paths. You can always go back to it if interest towards SVG takes off
again.

------
Sophistifunk
FXG was much nicer.

Boy howdy do I wish Adobe hadn't mismanaged Flash and Flex so badly they
killed them. If they'd gone more open, fixed performance issues on non-Windows
platforms, and actually followed through on the Tamarin gesture we'd all be in
a happier place.

------
taivare
I have asked my local library to order her SVG Essentials book & they did. I
have checked an people are taking it out and since then they have ordered
other SVG books.

------
bdahz
VPaint[1] is a research vector graphics editor (from SIGGRAPH 2015) that has
higher-level semantics of vector graphics editting. And it claimed more
efficiency to create vector graphics. May it be the hope to fix problems of
SVG you guys mentioned?

[1] [http://www.vpaint.org/](http://www.vpaint.org/)

------
Animats
There are at least three ways to draw in browsers now - a canvas object,
WebGL, and SVG. Apparently SVG is losing out for that application.

As a common representation for draw programs, SVG is quite useful. But
apparently it accumulated way too many features, and SVG 2, this author says,
was an solution to a non-problem.

~~~
peterbraden
They're all quite different. Canvas is raster based, SVG is vector, and WebGL
is a totally different approach tailored to hardware acceleration (and still
paints into a canvas, so it's raster ultimately).

~~~
Animats
For display, eventually everything is a raster, unless you output to something
like a pen plotter. Canvas has primitives including 'draw line', 'draw
circle', etc., and can be used as a lower level for a scene graph. There's
"scenegraph.js"; unclear if it's used much.

You can use WebGL as a 2D drawing system. On machines with OpenGL hardware
support (which today is everything above a flip phone) that's a reasonable way
to do fast 2D work. Games often do that for their menu screens.

SVG is more useful as a storage format than as a graphics toolbox.

------
stefek99
Holy crap.

I've read the first 30% of the article - you are clearly the expert.

Then fast forward to the end: "if only I could figure out a way to make them
pay"

Chronic fatigue (medical condition) is an issue and there should be a way to
work around that...

Independent, remote work, creating infographics and visualisations for media
outlets - that's a pretty large niche!

------
j45
Thanks to the author for all their work. SVG is becoming a little more
connected to some of the work I'm doing and I'm hoping a way can come up for
her to be supported to continue her work if she loves it. Someone who supports
a technology this selflessly a few years ahead of those who will come to need
it.

------
bootload
_" I am torn: I have invested this much of my life into SVG. Do I build on
that? Or do I write it off and start afresh with lessons learned and no
regrets?"_

What product needs to built that harnesses SVG?

~~~
pekk
What product needed to be built that harnessed HTTP, when it was first
created? It wasn't Google, Facebook and pets.com right away. It took a lot of
time to figure that out. There is a place for foundational work, it's just
hard to get funded for it.

~~~
bootload
_" What product needed to be built that harnessed HTTP, when it was first
created?"_

Browser. '94\. Killer product.

~~~
type0
More exactly -
[https://en.wikipedia.org/wiki/Netscape_Navigator](https://en.wikipedia.org/wiki/Netscape_Navigator)

------
adultSwim
Many of the reactions in this thread are discouraging. I wonder if HN is a
community worth investing in.

------
auggierose
If you write a spec, you should also implement a proof of concept.

~~~
distances
Did you read the post? One workgroup member was also an Inkscape developer,
and was implementing the new features. Both tasks apparently fully unpaid.

And then the browser vendors come only afterwards telling that they weren't
really interested in the first place.

~~~
rleigh
I think part of what's missing here is _libraries_ to render and convert SVG
to other formats. It's no good having a feature in Inkscape which no other
renderer yet implements. But if it was implemented in a library, which
Inkscape and other tools could use, then it might drive adoption a bit faster.

It pains me when I create a nice SVG in inkscape, and then librsvg, QtSVG or
whatever are incapable of displaying it. Better tools and libraries are
needed. Running inkscape from the command-line to generate PDF, PNG and other
export formats is a fallback, but it's often impractical to do that. That type
of conversion should be trivial with standard tools, but isn't yet.

~~~
aidos
I like the librsvg approach of just supporting the important features. Then
again, you can't do custom fonts (which is an issue for me) and I guess
everybody has features they need / would like.

librsvg can render into different backends via cairo. Maybe with a little more
work the combination of them could form the library you're talking about? I
definitely agree about having a good library. The way everything is deeply
bound into inkscape is a real shame. And when you use something like chrome
(blink) you kinda need the whole kitchen sink to make it work.

~~~
stuaxo
At a guess the reason it is minimal is because there wasn't much dev work on
it for a long time. If other devs had turned up and added missing features
they would have been added.

Also; newer features like meshgradient haven't been in Cairo for very long.

Afaict Features get added in unescape as its open source, a soft of neutral
ground + with authoring capability and artists in the community making it easy
to demo proposed patches.

------
staz
If compagnies have to

------
nickstefan12
> But I never cared about SVG itself. It's just a tool. I cared about what I
> could build with it.

I'm calling BS on that last statement of hers. I don't intend for this to
sound mean. I intend for it to help her (or readers), to be honest with
themselves. It WOULD be sad if she wasted all this time on SVG if she really
would have rather just been building stuff with SVG. However, that to me
doesnt reflect reality; so it shouldn't make her sad. She got to spend time
doing what she clearly actually likes doing: technical writing! Theres nothing
wrong with that!

No one who actually likes to build stuff would spend so much time on
committees, book deals, and technical writing. Thats okay! She should be
honest with herself about her preferences.

The positives are that "committees, book deals and technical writing" are very
transferable skills to whatever other web technology needs more of this sort
of thing.

EDIT: I in no way mean for this to be callous regarding counting pennies. I am
sympathetic to the fact that much of her work was unpaid :(

------
iamleppert
I'm sorry but does anyone find the following bit of code readable?

<svg class="defs-only"> <filter id="duotone" color-interpolation-
filters="sRGB" x="0" y="0" height="100%" width="100%"> <feColorMatrix
type="matrix" values="0.90 0 0 0 0.40 0.95 0 0 0 -0.10 -0.20 0 0 0 0.65 0 0 0
1 0" /> </filter> </svg>

SVG is a horrible way to do graphics, and not a good vector format due to its
complexity. It's also difficult to get good performance, you'll eventually end
up implementing stuff at a lower layer when SVG itself becomes a bottle-neck,
and it has tons of cross-platform bugs that require endless debugging.

The crux of the matter is vectors are drawings, and may or may not have a
hierarchical representation. It would be a lot better abstracted by a real
language, using a primitive drawing API that allows you set debugger
statements and the like to inspect state, variables, etc.

~~~
Mikhail_Edoshin
Yes, this is a pretty readable code. I don't understand it deeply, but it's
clear that it's a definition that defines some filter that I can call by its
id.

What seems to be a hierarchy comes from the fact that this is a serialization
of the data and the serialization has to be sequential and thus you cannot
have a true graph here, only a tree with references. This would be true for
any serialization format. Once you deserialize this into your internal format
you can have back your graph and it can be as efficient as you'd like.

As a serialization format, however, it's very good, because it's based on a
good standard. What's especially good about it is that you can see through its
structure and access parts of it using the same generic API as with other XML-
based formats. For example, in the browser you can style SVG with the same
styling you use for HTML or script it with JavaScript.

