Solved

Preview SVG from a textarea in a new window.

Posted on 2006-06-12
5
964 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

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
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…

708 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

13 Experts available now in Live!

Get 1:1 Help Now