Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Preview SVG from a textarea in a new window.

Posted on 2006-06-12
5
Medium Priority
?
1,011 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 29

Accepted Solution

by:
Pravin Asar earned 1000 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 29

Expert Comment

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

Featured Post

Tech or Treat!

Submit an article about your scariest tech experience—and the solution—and you’ll be automatically entered to win one of 4 fantastic tech gadgets.

Question has a verified solution.

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

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
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…

610 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