
An SVG that always shows today's date - edent
https://shkspr.mobi/blog/2018/02/this-svg-always-shows-todays-date/
======
drinchev
> SVG supports JavaScript.

I didn’t know that, probably because I never had to use JS in a SVG.

Probably it works only when SVGs are rendered by a browser, so this feature is
a bit of a hack for me.

~~~
billyhoffman
Normally this isn’t a problem. If the SVG is included with an <img> Tag the JS
won’t execute. If you directly embed the SVG tags into the HTML it will. But
surely no one does this with SVGs they receive from untrustworthy 3rd parties
right?

Except a web performance best practice (for non-H2 sites) is to inline images
into the HTML... and there are some auto-optimizing libraries that will embed
SVG as <SVG> tags instead of as a data: URI...

Yep. I know of a few persistent XSS vulns in a few top Alexa sites because of
this :-D

~~~
djsumdog
I think back to the XML readers and XSLT parsers that could read arbitrary
files or the fact that you can technically embed flash in a PDF (which is just
a wrapper around Postscript).

It's things like these that lead to security issues.

Honestly when I read that first line about SVG and Javascript, I was a little
horrified. Who the fuck on what planet ever though that could possible be a
good idea?

~~~
pcwalton
> Honestly when I read that first line about SVG and Javascript, I was a
> little horrified. Who the fuck on what planet ever though that could
> possible be a good idea?

Adobe, when they were trying to position SVG as a competitor to Macromedia's
Flash.

~~~
hvidgaard
It's the antithesis of good design. But that doesn't surprise me, coming from
the company that designed the clusterfuck that is pdf. It's ubiquitously in
everything tech, and an absolute nightmare to embed.

------
rhn_mk1
It's no longer an image, adding JS turned it into an application.

It's doubtful it will work outside of the browser, and even in a browser, it
will be static when used in an <img> tag.

~~~
TheRealPomax
If we're getting stuck on terminology: SVG were _never_ images, so if you
called them that, or you thought they were, that was a misconception that can
be laid to rest. SVG is a graphics document format, not an image format. It
was from the outset designed to allow interaction and programmatic behaviour
and its specification explicitly includes sections on how its document model
should be exposed to ECMAScript for dynamic document behaviour.

As for where this will work: any SVG document viewer that implements the full
spec should render this correctly, but you're correct in that it won't execute
as document when used as an <img> source in the browser. Not due to anything
related to SVG, but simply because that's what the HTML spec says <img> tags
should do for any and all content pointe to by the "src" attribute:

"The src attribute must be present, and must contain a valid non-empty URL
potentially surrounded by spaces referencing a non-interactive, optionally
animated, image resource that is neither paged nor scripted."
([https://dev.w3.org/html5/spec-preview/the-img-
element.html](https://dev.w3.org/html5/spec-preview/the-img-element.html))

~~~
Bromskloss
> must contain a valid non-empty URL potentially surrounded by spaces
> referencing a non-interactive, optionally animated, image resource that is
> neither paged nor scripted

So it is invalid to point to a scripted SVG, then?

~~~
zaroth
They're not saying that what you point to must not have scripting, they're
saying that the agent must not page or script whatever it is that you point
to.

So technically, no it's not "invalid" to point to a scripted SVG, but it
better not execute the script. So it might not work the way you want, unless
your goal is to see what it looks like without scripting!

------
adtac
[https://hookrace.net/time.gif](https://hookrace.net/time.gif) \- the same
thing, but with an endless GIF

~~~
archgoon
That is a _very_ different implementation.

It's a cool idea, taking advantage of the fact that gifs can be partially
decoded, then generate the next frame on the fly and then send it over to the
client as part of the same request (hello comet!), but there's a number of
practical (to the extent that either of these are practical) differences.

The svg can be downloaded, or cached, and it's functionality preserved (and
can be viewed with a browser, even in offline mode). The gif solution
technically would take an infinite amount of time to download. It requires an
ongoing connection to the server, and it cannot be cached or distributed via a
CDN.

So, not the same thing at all, but very interesting.

------
legulere
And this is why you cannot easily host arbitrary user-uploaded SVGs on your
website. One of the reasons why svgs are not as ubiquitous as png or jpg.

~~~
sqquuiiiddd
Wonder if you could sanitize it. Drop script tags?

~~~
silverwind
SVGO has a option to drop script tags, thought it's not enabled by default.

------
jccalhoun
I was hoping that it would be a svg that said, "today's date."

~~~
e12e
"What day is it?", asked Winnie the Pooh

"It's today," squeaked Piglet

"My favorite day," said Pooh

------
romanr
Is it really a today CURRENT date or date at time SVG Page was LOADED? I
didn’t see any update routine in the code.

~~~
edent
Pull Requests welcome ️

~~~
jwilk
To which repo?

~~~
edent
Stick a comment on my blog. I'll create a repo at lunchtime on
github.com/edent

~~~
jwilk
[https://github.com/edent/Dynamic-SVG-Calendar-
Icon](https://github.com/edent/Dynamic-SVG-Calendar-Icon)

------
TheRealPomax
Neat. And you could even improve this both in terms of loading speed and
filesize by using the XML `textContent` property rather than building
completely new nodes.

------
greggarious
>SVG supports JavaScript

Oooooh that probably has some nefarious uses

------
z3t4
Could have the text default to "JavaScript not enabled"

~~~
edent
That's a good point. I might default it to 29th February ️

------
the_cat_kittles
what is the "evt" you are passing in onload="init(evt)"? doesnt look like you
need it since it isnt used anyway. cool project!

~~~
jwatt
It's an alias for 'event'. It only exists for backwards compatibility
(shouldn't be used nowadays).

See "ANNOTATION 3" here:
[https://svgwg.org/svg2-draft/interact.html#SVGEvents](https://svgwg.org/svg2-draft/interact.html#SVGEvents)

------
lwhi
This is cool, but what if JS isn't available? Would it be worth having a
fallback?

------
jradd
I suppose it could if shkspr.mobi would actually resolve.

Did anybody save this svg as a gist or anything?

~~~
jwilk
[https://github.com/edent/Dynamic-SVG-Calendar-
Icon/raw/maste...](https://github.com/edent/Dynamic-SVG-Calendar-
Icon/raw/master/calendar.svg)

------
maxraz
Nicely done application

------
thisacctforreal
Works on iPhone by the way :)

