{"id":538,"date":"2009-06-19T12:23:12","date_gmt":"2009-06-19T17:23:12","guid":{"rendered":"http:\/\/blog.codedread.com\/archives\/2009\/06\/19\/embed-an-svg-editor-on-your-web-page\/"},"modified":"2009-06-19T12:23:12","modified_gmt":"2009-06-19T17:23:12","slug":"embed-an-svg-editor-on-your-web-page","status":"publish","type":"post","link":"https:\/\/www.codedread.com\/blog\/archives\/2009\/06\/19\/embed-an-svg-editor-on-your-web-page\/","title":{"rendered":"Embed an SVG Editor in Your Web Page"},"content":{"rendered":"<p><object type=\"image\/svg+xml\" width=\"100\" height=\"100\" style=\"float:right\" data=\"http:\/\/codedread.com\/clipart\/svg.svgz\"><span\/><\/object>In my spare time I've been having fun contributing to the <a href=\"http:\/\/svg-edit.googlecode.com\/\">SVG-edit project<\/a> this last couple weeks adding really basic features like selection and dragging.  The goal is a cross-browser <a href=\"http:\/\/www.w3.org\/Graphics\/SVG\" title=\"Scalable Vector Graphics\">SVG<\/a> editor that you can embed in web pages that works on any modern browser.  My biased definition of a modern browser: native support of SVG.  I know there are quite a lot of projects out there that do an online SVG editor already.  <a href=\"http:\/\/svg-edit.googlecode.com\/\">SVG-edit<\/a> is still in its infancy, but that's part of the charm I found in hacking on it.<!--more--><\/p>\n<p>One of the nice things about hosting it on <a href=\"http:\/\/googlecode.com\/\" title=\"Google Project Hosting\">Google Code<\/a> is that you can rig the Subversion repositories to serve the proper MIME types of the files in question.  This means we can have Google Code host the editor and just iframe it into our pages.<\/p>\n<p>For instance, using:<\/p>\n<p><code>&#60;iframe src=\"http:\/\/svg-edit.googlecode.com\/svn\/tags\/stable\/editor\/svg-editor.html\" width=\"750\" height=\"600\"\/&#62;<\/code><\/p>\n<p>here is the latest stable version of the svg-editor sitting in my blog:<\/p>\n<p><iframe loading=\"lazy\" src=\"http:\/\/svg-edit.googlecode.com\/svn\/tags\/stable\/editor\/svg-editor.html\" width=\"750\" height=\"600\"\/><\/p>\n<p>You can view source, I ain't lying.  The nice thing about this link is, when I wrote this blog entry, the above iframe included SVG-edit 2.1, but when 2.2 is released my web page will automatically include it.  This keeps you on the latest release but does not expose you to the potentially unstable <a href=\"http:\/\/svg-edit.googlecode.com\/svn\/trunk\/editor\/svg-editor.html\">trunk<\/a>.<\/p>\n<p>If you prefer to host it yourself, <a href=\"http:\/\/code.google.com\/p\/svg-edit\/downloads\/list\">download svg-edit<\/a> or <a href=\"http:\/\/code.google.com\/p\/svg-edit\/source\/checkout\">check out the source code<\/a>.  Eventually we'll host this on <a href=\"http:\/\/www.planetsvg.com\/\" title=\"PlanetSVG - Developer resources for SVG\">PlanetSVG<\/a> as well - that's the proper place for it in my opinion.<\/p>\n<p>And there's ongoing work by <a href=\"http:\/\/www.hokstad.com\/blog\">Vidar<\/a> to turn this into a <a href=\"http:\/\/wave.google.com\/\">Google Wave Gadget<\/a> for collaborative sketching, which would be awesome.<\/p>\n<p><object type=\"image\/svg+xml\" width=\"100\" height=\"100\" style=\"float:right\" data=\"http:\/\/codedread.com\/clipart\/facepalm.svgz\"><span\/><\/object>Anyway, if anyone wants to get this working on a <a href=\"http:\/\/www.microsoft.com\/windows\/\">legacy operating system<\/a> with a <a href=\"http:\/\/www.microsoft.com\/IE\">legacy browser<\/a> and a <a href=\"http:\/\/www.adobe.com\/svg\/viewer\/install\/\">legacy plugin<\/a> your patches would be really appreciated (<a href=\"http:\/\/examotion.com\/\">modern<\/a> <a href=\"http:\/\/gpac.sourceforge.net\/home_news.php\">plugins<\/a> or <a href=\"http:\/\/sgweb.googlecode.com\/\">shims<\/a> would also be good).  Note that it programmatically creates the SVG element inside the HTML and uses <a href=\"http:\/\/jquery.com\/\">jQuery<\/a> so this might be a challenge.  I'd still like to see it happen though! \ud83d\ude42<\/p>\n<p>You can <a href=\"http:\/\/groups.google.com\/group\/svg-edit\">discuss SVG-edit here<\/a> and <a href=\"http:\/\/code.google.com\/p\/svg-edit\/issues\/list\">report issues here<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In my spare time I&#8217;ve been having fun contributing to the SVG-edit project this last couple weeks adding really basic features like selection and dragging. The goal is a cross-browser SVG editor that you can embed in web pages that works on any modern browser. My biased definition of a modern browser: native support of [&#8230;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[25,46,11,28],"tags":[80,107,198,140],"class_list":["post-538","post","type-post","status-publish","format-standard","hentry","category-software","category-svg","category-technology","category-web","tag-editor","tag-jquery","tag-svg","tag-svg-edit"],"_links":{"self":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/posts\/538","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/comments?post=538"}],"version-history":[{"count":0,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/posts\/538\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/media?parent=538"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/categories?post=538"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/tags?post=538"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}