Solved

Preview SVG from a textarea in a new window.

Posted on 2006-06-12
5
970 Views
Last Modified: 2008-01-16
What I want is a way to enter in SVG code in a TEXTAREA and then preview the result in a different window.

Here is what I have, it displays text entered just fine but not any SVG.  I have the ADOBE SVG viewer installed.

<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
function openindex(src)
      {
alert("Hello" + src.value)
OpenWindow=window.open("", "newwin", "height=250, width=250,toolbar=no,menubar=no");
OpenWindow.document.write(src.value)
OpenWindow.document.close()
OpenWindow.focus()
     }
</SCRIPT>
</head>
<body>
  <form>
    <textarea id=svgTxt columns=700 rows=20>Sample</textarea>
    <input type=submit value=View onclick="openindex(document.getElementById('svgTxt'))">
  </form>
</body>
</html>

One odd behavior that I would like to do away with is that after the new window opens anything I typed is replaced with the default text.

Here is a sample of some SVG.  If I open this file it works just fine exactly as is, I should be able to copy this into my TEXTAREA and see it in the new window in the same way I see it when I open the file it comes from directly, right?

<svg width="100%" height="100%" viewBox="0 0 1000 1000" preserveAspectRatio="none" version="1.1">
     <defs>
          <symbol id="MySymbol" viewBox="0 0 200 200" preserveAspectRatio="none">
               <rect x="10" y="10" width="80" height="80"/>
               <rect x="110" y="10" width="80" height="80"/>
               <rect x="10" y="110" width="80" height="80"/>
               <rect x="110" y="110" width="80" height="80">
                    <animateColor attributeName="fill" attributeType="CSS" values="red;orange;yellow;orange;red" dur="2s" repeatCount="indefinite"/>
               </rect>

               <rect x="0%" y="0%" width="100%" height="100%" fill="none" stroke="blue" stroke-width="5"/>
          </symbol>
     </defs>
     <use x="45" y="10" width="500" height="500" xlink:href="#MySymbol"/>
</svg>
0
Comment
Question by:macgre
  • 2
  • 2
5 Comments
 
LVL 3

Expert Comment

by:radevo
ID: 16903109
Note sure why document.write will not render that which does when opened from a file.

May have to do with security or xml-parsing.

This post discusses firefox and the use of a data: protocol to render svg content in a new window opened from javascript:
 
   http://www.html.com/forums/javascript/9509-open-win-content-type.html

Good luck with it!
0
 
LVL 2

Author Comment

by:macgre
ID: 16903568
radevo,

Thanks for the link, I am very disappointed but it is not your fault.  I read this:

From Martin Honnen    
In my understanding if you want to have content type like image/svg+xml rendered that IE does not handle itself but which are handled by plugins then you need to have a file: or http: or ftp: URL, --->>> there is no way to have script pump in data into a window with document.write which is then handled by a plugin. <<<---

So it seems that what I want will have to be accomplished by some other means until IE directly supports SVG...  :(

I will leave the question open for a few more days to see if there is not some other way or that Mr Honnen is mistaken, otherwise you can expect full points.
 


I guess I could bounce the SVG content off my server, but I was hoping to avoid the extra call...
0
 
LVL 28

Accepted Solution

by:
Pravin Asar earned 250 total points
ID: 16906380
Here is a example for you.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
      PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:svg="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink">
<head>
<title>SVG embedded inline in XHTML</title>
</head>
<body>
<script language="javascript">
function previewSvg (fld, trgId) {
var txt = fld.value;
document.getElementById (trgId).innerHTML = txt;
return;
}
</script>
<form>
<textarea id="svgtext" rows="10" cols="50"><svg:svg version="1.1"  style="background-color: white;" width="300px" height="200px">
<svg:circle cx="150px" cy="100px" r="50px" fill="#ff0000" stroke="#000000" stroke-width="5px"/>
</svg:svg></textarea>
<br><input type="button" value="preview" onclick="previewSvg(this.form.svgtext, 'svgpreview');">
</form>
<object id="AdobeSVG" classid="clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2"> </object>
<?import namespace="svg" urn="http://www.w3.org/2000/svg" implementation="#AdobeSVG"?>
<div id="svgpreview" style="width: 300; height: 300;border: black solid;">
<div>
</body>
</html>
0
 
LVL 2

Author Comment

by:macgre
ID: 16906708
pravinasar,

Damn you're good!

Just one question: is this limited to just Adobe and IE or will it work with other configurations?

I plan to test it more when I get home...
0
 
LVL 28

Expert Comment

by:Pravin Asar
ID: 16906817
It works with IE and NS 8.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

895 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now