Skip to the Main Content

Note:These pages make extensive use of the latest XHTML and CSS Standards. They ought to look great in any standards-compliant modern browser. Unfortunately, they will probably look horrible in older browsers, like Netscape 4.x and IE 4.x. Moreover, many posts use MathML, which is, currently only supported in Mozilla. My best suggestion (and you will thank me when surfing an ever-increasing number of sites on the web which have been crafted to use the new standards) is to upgrade to the latest version of your browser. If that's not possible, consider moving to the Standards-compliant and open-source Mozilla browser.

April 26, 2007

SVG Comments

It’s been a while since I did anything really technologically innovative with this blog. But progress marches on, and it’s time to kick it up a notch. Mozilla/Firefox, Opera and the prerelease version of Safari all support inline SVG. So perhaps the time is ripe to enable SVG comments.

  1. First, this involved fixing MT::Sanitize, which now handles case-sensitive elements and attributes, and allows hyphens in attribute names.
  2. Next, I needed to add SVG support to the Sanitize Spec2.
  3. Finally, there was a bug in the DTD used by the W3C Validator, which is patched in the local version used by our comment system.

Using that local copy of the W3C Validator means we need to adhere to (no longer!) the rather lame restrictions of the XHTML+MathML+SVG DTD:

  1. SVG elements must be prefixed.
  2. The prefixes for the SVG (“svg:”) and XLink (“xlink:”) namespaces are hard-coded.
  3. The xmlns:xlink attribute must appear on the <svg:svg> element and not on a descendent thereof.

none of which are necessary consequences of the use of XML Namespaces.

Also, until I rewrite MT:Sanitize, style attributes are forbidden. Which means that this trick can’t be used.

Finally, I’ll ask that commenters include an <desc> element. Like the alt attribute of an <img />, the content of <desc> will be displayed in place of the figure in non-SVG-capable browsers.

Here’s an example3 of the sort of thing you can now leave in the comments:

sphere, cube, tetrahedron
Three Solids

Here are a couple more examples.

I hope this feature will be useful. Or, at least, the source of some entertainment.

Anyway, here’s a question I could probably find the answer to, with sufficient Googling around. But, probably, one of my readers already knows the answer.

A cubic Bézier curve is a map f:[0,1]→ℝ 2 f: [0,1] \to \mathbb{R}^2 Without loss of generality, we can take f(0)=(0,0)f(0) = (0,0) and f(1)=(x f,y f)f(1) = (x_f,y_f). f(s)=(x(s),y(s))f(s)=(x(s),y(s)) are cubic polynomials in s∈[0,1]s\in[0,1].

In SVG, such a cubic Bézier curve is specified like this:

<path d="... c x 1x_1 y 1y_1 x 2x_2 y 2y_2 x fx_f y fy_f ..." />

where

(1)dxds| s=0 =αx 1, dyds| s=0 =αy 1 dxds| s=1 =α(x f−x 2), dyds| s=1 =α(y f−y 2) \begin{aligned} \left. \frac{d x}{d s}\right|_{s=0} &= \alpha x_1,\qquad & \left. \frac{d y}{d s}\right|_{s=0} &= \alpha y_1 \\ \left. \frac{d x}{d s}\right|_{s=1} &= \alpha (x_f - x_2),\qquad & \left. \frac{d y}{d s}\right|_{s=1} &= \alpha (y_f - y_2) \\ \end{aligned}

for some constant, α\alpha. This data completely specifies the pair of cubics.

My question is: what’s α\alpha?

I’m gonna guess the answer is α=2\alpha=2 because, for that value, a cubic Bézier curve degenerates to a quadratic Bézier

<path d="... q x 1x_1 y 1y_1 x fx_f y fy_f ..." />

when (x 2,y 2)=(x 1,y 1)(x_2,y_2) = (x_1,y_1). But does anyone know for sure?

Update:

Sam Ruby proposes some code to ease a bit of the pain. It will take Namespace well-formed SVG code and convert it into the prefixed format demanded by the W3C Validator. I definitely plan to rollhave rolled this into our MovableType installation.

Update (4/29/2007):

Note that there is, currently, no way to mix SVG and MathML. One would like to be able to insert mathematical formulæ as labels in a figure. That, apparently, would require <foreignObject>, which is
  • not currently supported by Mozilla/Firefox
  • not supported by our current setup (though it could be)
  • in any case, a clumsy, broken mechanism for doing what we want
Instead, we have to settle for plain-text labels, as in
1-loop diagram, coupling electron to an external EM field e− e−
1-loop Contribution to Electron Magnetic Moment

That’s fine for the above Feynman diagram, but inadequate for many other uses.

1 In other respects, MT::Sanitize is something of a train wreck, and is badly in need of a complete rewrite along these lines.

2 For the curious, the Sanitize Spec currently reads:

img src alt,h4,textarea rows cols,div,bdo,span,p,br,a href target,
abbr,acronym,b,u,i,strong,em,ul,ol,li,dl,dt,dd,sup,tt,sub,pre,
blockquote cite,code,del,ins,math xmlns xmlns:xlink display,
annotation-xml encoding, mfenced open close separators,
mo lspace rspace fence separator stretchy maxsize minsize,
mi mathvariant,msub,msup,msubsup,mfrac linethickness,mn,
mstyle scriptlevel mathvariant displaystyle mathcolor mathbackground,
mtext,mspace width height depth,msqrt,mmultiscripts,mprescripts,
none,mroot,mphantom,merror,mover,munder,munderover,
maction actiontype other selection,mtable align columnalign
rowalign equalrows equalcolumns columnspacing rowspacing
columnlines rowlines frame,mrow xmlns:xlink xlink:type xlink:href,
mtr rowalign columnalign,mtd rowspan columnspan rowalign columnalign,
mpadded width,semantics,animate,animateColor,
animateMotion,animateTransform,circle,defs,desc,ellipse,
foreignObject ,font-face,font-face-name,font-face-src,
g,glyph,hkern,image,linearGradient,line,marker refX refY
markerUnits markerWidth markerHeight orient,metadata,missing-glyph,
mpath,path,polygon,polyline,radialGradient,rect,set,stop,
svg xmlns xmlns:xlink,switch,text,title,tspan dx dy,use,
* dir xml:lang title class id accent-height accumulate
additive alphabetic arabic-form ascent attributeName attributeType
baseProfile bbox begin by calcMode cap-height color color-rendering
content cx cy d descent display dur end fill fill-rule font-family
font-size font-stretch font-style font-variant font-weight from fx
fy g1 g2 glyph-name gradientUnits hanging height horiz-adv-x
horiz-origin-x ideographic k keyPoints keySplines keyTimes lang
marker-end marker-mid marker-start mathematical max min name offset
opacity origin overline-position overline-thickness panose-1 path
pathLength points preserveAspectRatio r repeatCount repeatDur
requiredExtensions requiredFeatures restart rotate rx ry slope stemh
stemv stop-color stop-opacity strikethrough-position
strikethrough-thickness stroke stroke-dasharray stroke-dashoffset
stroke-linecap stroke-opacity stroke-linejoin stroke-miterlimit
stroke-width systemLanguage target text-anchor to transform type u1
u2 underline-position underline-thickness unicode unicode-range
units-per-em values version viewBox visibility width widths x x-height
x1 x2 xlink:actuate xlink:arcrole xlink:href xlink:role xlink:show
xlink:title xlink:type xml:base xml:space y y1 y2 zoomAndPan,
svg:a,svg:animate,svg:animateColor,svg:animateMotion,
svg:animateTransform,svg:circle,svg:defs,svg:desc,svg:ellipse,
svg:foreignObject,svg:font-face,svg:font-face-name,svg:font-face-src,
svg:g,svg:glyph,svg:hkern,svg:linearGradient,svg:line,svg:marker refX
refYmarkerUnits markerWidth markerHeight orient,svg:metadata,
svg:missing-glyph,svg:mpath,svg:path,svg:polygon,svg:polyline,
svg:radialGradient,svg:rect,svg:set,svg:stop,svg:svg xmlns:svg
xmlns:xlink,svg:switch,svg:text,svg:title,svg:tspan dx dy,svg:use

Note that we allow SVG elements in both their prefixed and un-prefixed forms.

3 Here’s the code to produce that example:

<div class="centeredfigure">
  <svg xmlns="http://www.w3.org/2000/svg"
       width="192" height="64" viewBox="0 0 120 40">
    <desc>sphere, cube, tetrahedron</desc>
    <defs>
      <radialGradient id="plat1" fx=".3" fy=".3" r=".7">
        <stop stop-color="#CCF" offset="0" />
        <stop stop-color="#55F" offset="1" />
      </radialGradient>
      <linearGradient id="squ1" x1=".3" y1=".3" x2="1.7" y2="1.7">
        <stop stop-color="#CDC" offset="0" />
        <stop stop-color="#6D6" offset="1" />
      </linearGradient>
      <linearGradient id="squ2" xmlns:xlink="http://www.w3.org/1999/xlink"
            x1="0" y1="0" x2="1" y2="-.6" xlink:href="#squ1" />
    </defs>
    <g transform="translate(5,5)" stroke="none">
      <circle cx="15" cy="15" r="15" fill="url(#plat1)" />
      <g stroke="#9D9" stroke-width=".5" stroke-opacity="0.6">
        <rect width="20" height="20" x="40" y="10" fill="url(#squ1)" />
        <path d="M 40 10 l 20   0 l 10 -10 l -20  0 z" fill="url(#squ2)" />
        <path d="M 60 30 l  0 -20 l 10 -10 l   0 20 z" fill="#9D9" />
      </g>
      <g>
        <path d="M 95 0 l -17 20 l  17 10 z" fill="#FCC" />
        <path d="M 95 0 l  17 20 l -17 10 z" fill="#FBB" />
      </g>
    </g>
  </svg><br />
  <span class="figurecaption">Three Solids</span>
</div>
Posted by distler at April 26, 2007 1:44 AM

TrackBack URL for this Entry:   https://golem.ph.utexas.edu/cgi-bin/MT-3.0/dxy-tb.fcgi/1254



6 Comments & 1 Trackback

Feynman diagrams

How about some Feynman diagrams?

To kick things off, here’s the infamous box diagram:

Box diagram d s¯ u, c, t s d¯ u, c, t W− W+
K 0K¯ 0K^0\overline{K}^0 Mixing

Nice!

Posted by: Jacques Distler on April 27, 2007 6:29 PM | Permalink | PGP Sig | Reply to this

Re: SVG Comments

This example went through a few rounds before getting it to work. Apparently the sanitizer doesn’t like any line breaks inside tags. When inkscape saves a figure to “Plain SVG” there are tons of line breaks in the tags, which have to be fixed.

Posted by: Robert McNees on May 3, 2007 8:16 PM | Permalink | Reply to this

Re: SVG Comments

I did not see a yellow ball on the main page, but in the window to post a comment, I did see it.

I’m using Firefox on a Mac.

Posted by: j on May 9, 2007 5:58 PM | Permalink | Reply to this
Read the post Inline SVG and Valid XHTML on WordPress
Weblog: Dani Iswara .Net
Excerpt: In previous post, I tried to serve users with inline SVG (Scalable Vector Graphics) which valid XHTML (Extensible HyperText Markup Language) on WordPress engine. But I failed. Yes, I know that valid XHTML is not a must for some users, and it’s an...
Tracked: April 18, 2009 7:21 AM

Re: SVG Comments

It’s so lovely to see others with passion for SVG! Excellent post, as well! :+)!

Posted by: Brie on October 22, 2009 7:09 PM | Permalink | Reply to this

Re: SVG Comments

Example anim01 - demonstrate animation elements ∫ −∞ ∞e −ax 2dx=πa{\int_{-\infty}^{\infty}e^{-a x^2}d x}=\sqrt{\tfrac{\pi}{a}}
Posted by: Jacques Distler on February 2, 2010 12:07 AM | Permalink | PGP Sig | Reply to this

Re: SVG Comments

Layer 1

Posted by: Naaifa Sultana on November 15, 2015 10:49 AM | Permalink | Reply to this

Post a New Comment