Why does this vector :
works in http://jsfiddle.net/ZgPY4/2/ and this one
doesn't. How is
<svg> making it work?
<script> has special powers other elements don't: it is a "CDATA element". That means that any
& characters up to the end of the element are taken as literally meaning those characters. So what is passed to the JS interpreter is:
which is obviously not valid JS syntax.
The concept of a "CDATA element" comes from the SGML world from which HTML developed. But SVG comes from the XML world where things are simplified and there are no CDATA elements. Consequently the SVG
<script> element has no special powers: inside an SVG script,
< introduces a tag and
& introduces an entity or character reference.
( gets parsed to
( and the resulting string passed to the JS interpreter is:
In XML terms the
<script> element is in the HTML namespace and the
<svg><script> element is in the SVG namespace, so they are different elements. HTML5 makes this all less clear by hiding the namespace prefixes and applying a non-XML parser to the SVG (which is why
( works despite it being non-well-formed; should be
<svg> tag pair (your closing tag is not provided) the entity number is being translated to it's proper character reference as it's rendered as html, then the engine executes the ECMA script (which it is allowed to do for drawing).
OWASP.org documents this as hex encoding without semicolons.