I had heard the advice, but somehow I had not really looked at the actual results. I guess my referenced SVG clip art was causing a bit of a problem in feed readers as the images were only sized via external CSS (which feed readers do not bother picking up). Only after seeing the results of my referenced SVG objects in Planet Mars did I finally get around to doing something about it. Inline styles it is then, until I get around to embedding the images inline when syndicated). I hope this also fixes Opera's handling of my clip art as well. Here is my WordPress quick tag which I use to add clip art to my site:

edButtons[edButtons.length] =
new edButton('ed_clipArt'\
,'clipArt'
,'<object type="image/svg+xml" style="float:right;width:6em;height:6em;clear:both;margin-left:10px" data="'
,'.svgz"><span/></object>'
,'a'
);

Since the majority of my images are right-floated, for now I don't mind the occasional one in which I switch float:left for float:right and margin-right for margin-left...

§442 · March 25, 2008 · Life · Tags: , · [Print]

8 Comments to “WordPress Quick Tag: SVG Clip Art”

  1. ws79 says:

    Yup, the SVG image is small but no text in Opera’s feed reader :-/

  2. Phil says:

    In Opera 9.5 beta, there was text in the feed reader, but as soon as the image showed up, the text disappeared.

  3. James says:

    The page also fails to validate as html at w3.org

    I’d be interested in seeing a way of integrating svg images that validates as xhtml… though there are plenty of non svg friendly browsers out there still.

    I like way these input boxes change shape…

  4. James, you can add a ?xhtml=1 to the URL and then try validating – this force-feeds the validator true XHTML (I use content negotiation on the site and the validator must not identify itself as grokking application/xhtml+xml).

    But I think the inline SVG poses a problem there (if I wanted to validate I’d have to declare the namespaces at the top and then use prefixed SVG elements like svg:svg, etc).

  5. @James: Incidentally, my pages did validate weeks ago when using the ?xhtml=1 and I had prefixed SVG elements. However, I guess I’ve since given up on validation – I prefer non-prefixed SVG these days. Plus, I started using deprecated, presentational attributes from HTML on my clipart <object> elements because of silly CSS Naked Day 😛

  6. “The page also fails to validate as html at w3.org

    I’d be interested in seeing a way of integrating svg images that validates as xhtml… though there are plenty of non svg friendly browsers out there still.

    I like way these input boxes change shape…”

    No work, my…

  7. @ws59 @Phil: Looking at Opera 10 it seems that my feed items show up the way they should now (clip art floated to the right inline with the text). Bravo Opera! 😀

    No clip art in the feed view of Safari 4b though 🙁

  8. Red Rhyder says:

    James we have png, swf, jpg images that may be helpful to you. We have other formats too, vector formats, eps, ai. Feel free to browse our catalog. I’ve been helping make clip art since the 80’s. our catalog is available at http://artclip.biz/ Hope this was helpful.

    Thanks James,

    Red