Inline SVG and Valid XHTML on WordPress

April 17, 2009 – 16:15 by Dani Iswara. Words count: 456.
Last updated: Saturday, April 25, 2009 at 8:37.

In previous blog 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 old debate.

As a platform of two-dimensional graphics, SVG is interoperable, royalty-free, open standard, vendor-neutral, developed by W3C (‘World Wide Web Consortium’) groups. Based on XML (‘Extensible Markup Language’) and programming API (‘Application Programming Interface’), SVG graphics and animations are text-based.

We can use it as web graphics, user interfaces, mobile applications, mapping, high quality design, and more.

See my previous post about trying SVG on Opera browser (in bahasa Indonesia).
These codes are valid XHTML (by W3C & Validome) and valid XML (Extensible Markup Language) by Validome:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC
  "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN"
  "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg-flat.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Inline SVG in an XHTML File</title>
</head>
<body>
<h1>SVG stop and red cross</h1>

<!-- SVG codes starts here -->
<svg:svg xmlns:svg="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" width="100%" height="100%">
<svg:circle cx="95px" cy="80px" r="70px" fill="red"/>
<svg:rect x="45" y="65" width="100" height="30" fill="rgb(255, 255, 255)"/>
<svg:circle cx="300px" cy="80px" r="67px" fill="#ffffff" stroke="red" stroke-width="5px"/>
<svg:rect x="250" y="65" width="100" height="30" fill="red"/>
<svg:rect x="285" y="30" width="30" height="100" fill="red"/>
</svg:svg>
<!-- SVG codes ends here -->

</body>
</html>

See this sample page.

Inline SVG failed on WordPress text editor

I’m using code editor mode on WordPress 2.7.1. And set automatically converts of XHTML tags. When I saw the post preview of those valid SVG codes (only the SVG content), I got the lovely death screen of Firefox (I knew Opera handle it lot of better):

XML Parsing Error: not well-formed
Location: http://daniiswara.net/?p=578&preview=true
Line Number 117, Column 6:<p><svg :svg xmlns:svg=”http://…

It run smoothly without svg:svg, but goes to invalid XHTML/XML.

I asked Jeff Schiller–co-chair of the W3C SVG Interest Group–by e-mail. He said:

…on WordPress 2.5, it will lower-casing all elements and injecting <br /> after each lines of SVG text.
…
On WordPress 2.7, lower-cases is no-longer a problem, but it puts </p><p> between SVG lines of text…

See also his bugs report ticket on WordPress mungles camelcase inline SVG elements. The suggestion is try to add block filter elements on /wp-includes/formatting.php, line ~120, e.g.:

$allblocks = '(?:svg|circle|rect|text|animateTransform|...|table|thead...

You can see all of its elements on index of SVG elements.

I tried that filter tricks, but it still failed.

Prof. Jacques Distler allow SVG on blog comment section of his MovableType blog machine, and valid XHTML by W3C, but not by Validome (both XML and XHTML). Updated April 19, 2009: Read his note about why Validome is wrong on Validator Face-Off.

To make all SVG codes in one line is not a big problem, but it’s not painless. :)
Any clue, tips, or :idea: ?

For another old samples of SVG in Opera, please try SVG articles.

Just unessential weblog
Dani Iswara, mail me: [myfirstnamelastname]@gmail.com or use contact form.

Posted in category: Web Designs, WordPress Tips
Tags: , , ,
32 Comments/Trackbacks (Comment closed)

You are free to share (copy, distribute, transmit) & adapt this blog post under the similar license (Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported; CCA-NC-SA 3.0 Unported). Please put these links on your copy:
Taken from: Inline SVG and Valid XHTML on WordPress by Dani Iswara.

Unimportant Related/Random Posts

You may also read list of most popular posts and most popular tags of Dani Iswara .Net.

32 Responses to post titled: Inline SVG and Valid XHTML on WordPress

  1. Comment by trinil on April 17, 2009 at 17:35:06
    using Mozilla Firefox 3.0.3 on Windows XP

    Bersemangat bli, buat ngopreknya….

  2. Comment by nomercy on April 17, 2009 at 21:40:14
    using Mozilla Firefox 3.0.6 on Windows Vista

    yg paling nyebelin itu soal wai-aria ituloh mas … sampai sekarang belum termasuk dalam database w3c …

  3. Comment by Dani Iswara on April 18, 2009 at 01:20:36
    using Mozilla Firefox 3.0.8 on Gentoo Linux

    nomercy,
    sbg fakir benwit, saya sih dukung aja kalo teknologi web x.x+ bs jd lbh aksesibel lg :)

  4. Comment by uwiuw on April 18, 2009 at 02:29:04
    using Mozilla Firefox 2.0.0.1 on Windows XP

    wah kodenya dimakan sama parser wp yah ? :( dan cuma kejadian sama wp 2.7.1 lai…hmm menarik…kalau udah ada titik terang solusinya tolong kasih tau yah krn sy jg mau nyoga svg. Kayaknya lucu dimasukin ke desain

    btw, sy mau baca svg di opera itu tp deadly message itu muncul di fiefox sy euy. jadi…..mau open opera dulu biar bisa baca (sial! ada apad dgnmu firefox, kamu kan browser paling hebat sedunia :D )

  5. Comment by Dani Iswara on April 18, 2009 at 03:14:57
    using Mozilla Firefox 3.0.8 on Gentoo Linux

    uwiuw,
    xixixi, sori bos, salah di saya, lupa ngapus formatting itu..
    utk svg, apalagi yg animasi, recommended opera 9.5+ :P ato coba firefox nightly builds..

  6. Comment by Basoro on April 18, 2009 at 09:51:48
    using Opera Mini 9.60

    Iya mas. Kalo udah ada progres dikabari ya. Soalnya juga invalid nih kalo di XHTML.

  7. Comment by Dani Iswara on April 18, 2009 at 10:48:33
    using Mozilla Firefox 3.0.8 on Gentoo Linux

    Basoro,
    wah, saya cuman make aja, je..yg ngoprek dalemannya biar para web guru itu..jd emang blm bs valid ya.. :(

  8. Comment by thegands on April 18, 2009 at 13:19:58
    using Mozilla Firefox 3.0.8 on Windows XP

    How about removing any new line at the code? is that possible? umm.. i mean, <svg rect=”" …. /><svg circle=”" …. /> … how bout this?

  9. Comment by dyagnoz on April 18, 2009 at 13:46:40
    using Mozilla Firefox 3.0.1 on Windows XP

    bang dani minta sarannya dong, sya mau buat blog yang isinya semuanya berkaitan dengan medis.

    saya panggemarnya tulisan abang lhooo,,beneraaann
    jalan2 ke blog saya ya bang, lalu kasih saya saran dan pencerahan juga…

    mumpung blog saya belum ada isinya, jadi ngaturnya gampang kemudian

  10. Comment by Dani Iswara on April 18, 2009 at 13:54:06
    using Mozilla Firefox 3.0.8 on Gentoo Linux

    thegands,
    yes, I did it on my previous post on WordPress, bang.
    to make it valid, it should be using something like <svg:svg>, but failed on WordPress.. :(
    the one line or block style are just how to write it as easy as possible, cmiiw :)

    I’d prefer one line styling because it’s too confusing using these block style elements: a for the link in svg, font for inline styling, etc

  11. Comment by thegands on April 18, 2009 at 14:24:15
    using Mozilla Firefox 3.0.8 on Windows XP

    yeah, me too. Like solution from wordpress bug traq, i think it should solve the problem. does the new wp have problem with this solution? Coz svg is really cool. I really love it.

  12. Comment by thegands on April 18, 2009 at 14:26:15
    using Mozilla Firefox 3.0.8 on Windows XP

    to disable revision feature in newest wp, we have to disable some options in wp-config.php and admin-ajax.php. :D

  13. Comment by Dani Iswara on April 18, 2009 at 14:35:58
    using Mozilla Firefox 3.0.8 on Gentoo Linux

    thegands,
    I have no :idea: why WordPress don’t understand valid svg:svg (yet), something related to sanitizer thing rather than formatting??

    thank you for your suggestions, bang

  14. Comment by thegands on April 18, 2009 at 14:54:00
    using Mozilla Firefox 3.0.8 on Windows XP

    may be we need some hack to wordpress core? like functions.php?

  15. Comment by Dani Iswara on April 18, 2009 at 15:02:23
    using Mozilla Firefox 3.0.8 on Gentoo Linux

    thegands,
    until Jeff and his groups release some solutions, yes..and that is part of your challenges, bang..
    I’m following you..I’m out now :)

  16. Comment by thegands on April 18, 2009 at 15:19:19
    using Mozilla Firefox 3.0.8 on Windows XP

    yeah, i think we have to make some hack to wp core. i’ll try to find how to solve this. :D

  17. Comment by galih on April 18, 2009 at 15:46:00
    using Mozilla Firefox 3.0.8 on Ubuntu Linux 8.10

    tambah ilmu…

  18. Comment by gdenarayana on April 18, 2009 at 19:49:45
    using Mozilla Firefox 3.0.1 on Windows XP

    [OOT] nyoba nganggo bahasa bali
    badah, ne mare sajaan OOT puk, jeg ing nawang be tentang ane SVG kene bli, ane strict ajak transitional dogen sube kelabakan jak mare melajah :D

    eits…to ane thegands sai oprek2 kode yee bli, mudah2an gen ngidaang, kangguang tiyang mace komen dogen dini, ing nawang soalne, nganggo basa bali pang sing terkontaminasi komentar ane lenan :mrgreen:

  19. Comment by Dani Iswara on April 18, 2009 at 22:05:42
    using Mozilla Firefox 3.0.8 on Gentoo Linux

    gdenarayana,
    seandainya bisa <span lang="Bali">..ae baang ba ya mragatang malu..ya mara pragina ngulik..

  20. Comment by Jacques Distler on April 19, 2009 at 00:52:07
    using Mozilla SeaMonkey 2.0b1pre on Mac OS X

    Prof. Jacques Distler allow SVG on blog comment section of his MovableType machine, and valid XHTML by W3C, but not by Validome.

    Validome is wrong.

  21. Comment by Dani Iswara on April 19, 2009 at 05:03:43
    using Mozilla Firefox 3.0.8 on Gentoo Linux

    Jacques Distler,
    ah ya that test..thank you, I’ll updated the post later.

  22. Comment by uwiuw on April 23, 2009 at 01:50:13
    using Mozilla Firefox 2.0.0.1 on Windows XP

    soal kenapa komentar dihitung 20, padahal yg terlihat 21…mungkin karena komentar nomor 20 itu bukan komentar melainkan trackback.

    lihat bagian post menu WYSWYG blog wp kita ada penjelasan “Trackbacks are a way to notify legacy blog systems that you’ve linked to them. If you link other WordPress blogs they’ll be notified automatically using pingbacks, no other action necessary.”

    ini sistem trackback wp..sementara blog itu kayaknya bukan pake wp (mungkin moveable type ) tp sama2 mendukung meta api yg sama. jadi bisa saling ngeping…beda bila ama blog jenis lain kayak blogspot dan livejournal…walau sama2 blog tp belum (mau) komunikasi

    btw, sori yah abru bisa balas karena waktu komen kamu masuk ke blog sy, sy lagi terjebat ngobrol di conference YM bareng temen2 tanpa bisa keluar euy

  23. Comment by Dani Iswara on April 23, 2009 at 01:58:35
    using Mozilla Firefox 3.0.8 on Gentoo Linux

    uwiuw,
    eh sekarang kok bener lg..jd 22..sebelumnya masi 20, suer..

    kayaknya itu komen prof. jacques asli (memang make MT)..bukan trackback..

    makasi bos..sante aja.. :)

  24. Comment by uwiuw on April 23, 2009 at 02:11:36
    using Mozilla Firefox 2.0.0.1 on Windows XP

    kenapa yah…kalau sy malah sering dapat posting temen tuh masuk ke bagian spam, 2 hari sesudah dia posting komentar.

    si gands entah udah berapa kali masuk sana. tau kenapa yah kok komentar orang bisa lama diproses wp ?

  25. Comment by Dani Iswara on April 23, 2009 at 08:54:23
    using Mozilla Firefox 3.0.8 on Gentoo Linux

    [OOT] uwiuw,
    maksudnya setelah 2 hari itu gemana ya..nyangkut kemana dl ya..
    IMO, IP komentator mungkin sempat blm lolos waskat akismet di blog lain..cmiiw

  26. Comment by uwiuw on April 23, 2009 at 20:53:09
    using Mozilla Firefox 2.0.0.1 on Windows XP

    hmm kayaknya bisa begitu yah….udah kayak roller coster, komentnya jalan jalan dulu kemana mana lalu baliknya ke koment box kita lagi yah….hmm agak sangsi

  27. Comment by uwiuw on April 25, 2009 at 13:34:45
    using Mozilla Firefox 2.0.0.1 on Windows XP

    bli..untuk (masalah) svg kamu mungkin ini bisa…. http://wordpress.org/extend/plugins/libxml2-fix/

    kebetulan sy juga baru upgrade wp 2.7.1 dari versi 2.6.1 dan mengalami masalah sama kode snippet saya ancur lebur. Jadi nyari solusi buat ngebenerin parser wp.

    sementara solusi core wpnya aga di bahasa indonesianya ada di blog blaszta di http://www.blaszta.com/blog/2009/02/bug-ketika-menggunakan-wp-271-dan-windows-live-writer/

    btww…bila solusinya ngak bener heheheh coba deh pluginnya :D

  28. Comment by Dani Iswara on April 25, 2009 at 15:15:33
    using Mozilla Firefox 3.0.9 on Gentoo Linux

    uwiuw,
    makasi mas..sudah saya coba..walau saya ngga make WLW, tp parsing xml tetep gagal dgn pesan kesalahan serupa.. :(

  29. Comment by uwiuw on April 25, 2009 at 15:52:40
    using Mozilla Firefox 2.0.0.1 on Windows XP

    maaf mas…kayaknya solusinya salah alamat yah :D no hope banget :D

  30. Comment by Dani Iswara on April 25, 2009 at 17:19:34
    using Mozilla Firefox 3.0.9 on Gentoo Linux

    uwiuw,
    gpp..entah apa ini berhub ama fungsi filter wp autop

  31. Comment by pawel on November 27, 2009 at 00:32:24
    using Mozilla Firefox 3.5.5 on Ubuntu Linux 9.10

    How can i embedding a script. Is there sth like <svg:script ?

  32. Comment by Dani Iswara on November 27, 2009 at 06:43:19
    using Opera 10.01 on GNU/Linux

    pawel,
    SVG has some tags using SMIL, ECMAScript (JavaScript), and DOM to produce some animations and interactions such as on the SVG games.

Sorry, for some reasons (sometimes due to sp*ms attack), the comment form is closed at this time. If You have any suggestions, please contact me. Thank you.

Dani Iswara .Net

Return to TOP
›› Older entries: Pengembangan Pendidikan Keprofesian Berkelanjutan (P2KB) Online IDI
‹‹ Newer entries: Facebook is on the Road with Web Accessibility