SVG Firefox, Opera, IE, Safari

Discuss SVG code, accessible via the XML Editor.
Forum rules
Post Reply
JimJoyce
Posts: 37
Joined: Fri Jun 19, 2009 7:06 pm

SVG Firefox, Opera, IE, Safari

Postby JimJoyce » Fri Jun 19, 2009 11:38 pm

I'm having problems getting SVG to display.
I'm working offline. i.e using localhost harddisk, rather than remote server.
I've tried standalone SVG, as well as SVG embedded in HTML.
SVG code validates cleanly.

Firefox and Opera display only <text>
IE displays onlt top third of 'page' ! ! !
Windowd-Safari displays perfectly

This is my HTML:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head><title>Test Scale & Translate</title></head>
<body width="700" height="600">
<!-- Belt and Braces. -->
<!-- New browsers deprecate '<embed>' -->
<!-- Old browsers know nothing of '<object>' -->
<object data="grid.svg" width="100%" height="100%" type="image/svg+xml">
<embed   src="grid.svg" width="100%" height="100%" type="image/svg+xml" />
</object>
</body>
</html>


This is the heavily commented SVG:

Code: Select all

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="grid.css"?>
<svg width="700" height="600" viewbox="0 0 700 600">
  <!-- Draw 'pixel scale' Top-Left -->
  <path d="M0,500 L0,0  L600,0" />
  <!-- Draw Horizontal markers -->
  <path d="M10,0  L10,50" /> <path d="M20,0  L20,50" /> <path d="M30,0  L30,50" /> <path d="M40,0  L40,50" />  <path d="M50,0  L 50,50" />
  <path d="M60,0  L60,5"  /> <path d="M70,0  L70,5"  /> <path d="M80,0  L80,5"  /> <path d="M90,0  L90,5"  /> <path d="M100,0 L100,10" />
  <path d="M110,0 L110,5" /> <path d="M120,0 L120,5" /> <path d="M130,0 L130,5" /> <path d="M140,0 L140,5" /> <path d="M150,0 L150,10" />
  <path d="M160,0 L160,5" /> <path d="M170,0 L170,5" /> <path d="M180,0 L180,5" /> <path d="M190,0 L190,5" /> <path d="M200,0 L200,10" />
  <path d="M210,0 L210,5" /> <path d="M220,0 L220,5" /> <path d="M230,0 L230,5" /> <path d="M240,0 L240,5" /> <path d="M250,0 L250,10" />
  <path d="M260,0 L260,5" /> <path d="M270,0 L270,5" /> <path d="M280,0 L280,5" /> <path d="M290,0 L290,5" /> <path d="M300,0 L300,10" />
  <path d="M310,0 L310,5" /> <path d="M320,0 L320,5" /> <path d="M330,0 L330,5" /> <path d="M340,0 L340,5" /> <path d="M350,0 L350,10" />
  <path d="M360,0 L360,5" /> <path d="M370,0 L370,5" /> <path d="M380,0 L380,5" /> <path d="M390,0 L390,5" /> <path d="M400,0 L400,10" />
  <path d="M410,0 L410,5" /> <path d="M420,0 L420,5" /> <path d="M430,0 L430,5" /> <path d="M440,0 L440,5" /> <path d="M450,0 L450,10" />
  <path d="M460,0 L460,5" /> <path d="M470,0 L470,5" /> <path d="M480,0 L480,5" /> <path d="M490,0 L490,5" /> <path d="M500,0 L500,10" />
  <path d="M510,0 L510,5" /> <path d="M520,0 L520,5" /> <path d="M530,0 L530,5" /> <path d="M540,0 L540,5" /> <path d="M550,0 L550,10" />
  <path d="M560,0 L560,5" /> <path d="M570,0 L570,5" /> <path d="M580,0 L580,5" /> <path d="M590,0 L590,5" /> <path d="M600,0 L600,10" />
  <!-- Draw Vertical markers -->
  <path d="M0,10  L50,10" /> <path d="M0,20  L50,20" /> <path d="M0,30  L50,30" /> <path d="M0,40  L50,40" /> <path d="M0,50  L50,50"  />
  <path d="M0,60  L5,60"  /> <path d="M0,70  L5,70"  /> <path d="M0,80  L5,80"  /> <path d="M0,90  L5,90"  /> <path d="M0,100 L10,100" />
  <path d="M0,110 L5,110" /> <path d="M0,120 L5,120" /> <path d="M0,130 L5,130" /> <path d="M0,140 L5,140" /> <path d="M0,150 L10,150" />
  <path d="M0,160 L5,160" /> <path d="M0,170 L5,170" /> <path d="M0,180 L5,180" /> <path d="M0,190 L5,190" /> <path d="M0,200 L10,200" />
  <path d="M0,210 L5,210" /> <path d="M0,220 L5,220" /> <path d="M0,230 L5,230" /> <path d="M0,240 L5,240" /> <path d="M0,250 L10,250" />
  <path d="M0,260 L5,260" /> <path d="M0,270 L5,270" /> <path d="M0,280 L5,280" /> <path d="M0,290 L5,290" /> <path d="M0,300 L10,300" />
  <path d="M0,310 L5,310" /> <path d="M0,320 L5,320" /> <path d="M0,330 L5,330" /> <path d="M0,340 L5,340" /> <path d="M0,350 L10,350" />
  <path d="M0,360 L5,360" /> <path d="M0,370 L5,370" /> <path d="M0,380 L5,380" /> <path d="M0,390 L5,390" /> <path d="M0,400 L10,400" />
  <path d="M0,410 L5,410" /> <path d="M0,420 L5,420" /> <path d="M0,430 L5,430" /> <path d="M0,440 L5,440" /> <path d="M0,450 L10,450" />
  <path d="M0,460 L5,460" /> <path d="M0,470 L5,470" /> <path d="M0,480 L5,480" /> <path d="M0,490 L5,490" /> <path d="M0,500 L10,500" />
  <!-- Label Horizontal 100 200 300 400 500 -->
  <text x="90"  y="25" >100px</text> <text x="190" y="25" >200px</text> <text x="290" y="25" >300px</text>
  <text x="390" y="25" >400px</text> <text x="490" y="25" >500px</text> <text x="590" y="25" >600px</text>
  <!-- Label Vertical 100 200 300 400 500 -->
  <text x="15"  y="105">100px</text> <text x="15"  y="205">200px</text> <text x="15"  y="305">300px</text>
  <text x="15"  y="405">400px</text> <text x="15"  y="505">500px</text>
  <!-- Add explanatory Text -->
  <text x="100" y="60" >GRID defined as:</text>
  <text x="195" y="60" >Positioned at 50,50</text> <text x="300" y="60" >Size: 50x50</text>
  <text x="100" y="75" >The Grid can be re-positioned and / or re-sized.</text>
  <text x="330" y="75" >( Curently: </text> <text x="388" y="75" >Translate ( 50, 0 )</text>
  <text x="480" y="75" >Scale ( 5, 5 ) )</text>
  <text x="100" y="90" >The values may be changed , or the order of commands may be changed.</text>
  <text x="100" y="105" >Order of commands is significant, as the Second is dependent on the First.</text>
  <text x="100" y="120" >( Note how both the Stroke-width and the Text-size are affected by the scale.)</text>

  <text x="100" y="150" >Top-Left and Bottom-Right corners are labelled with the original defined positions, (50,50 and 100,100),</text>
  <text x="100" y="165" >Repositioning and Scaling has effectively changed them. They now appear to be 300,250 and 550,500.</text>
  <text x="100" y="180" >( Note: The Grid was originally the size of the 50x50 grid in top-left corner.)</text>
  <!-- To change the Position and the Size of the Grid -->
  <!-- adjust the values in the two 'transform' commands below, -->
  <!-- and amend the corresponding values in the descriptive 'text' lines above (y="75"). --> 
  <!-- N.B. These 'transforms' are 'nested'.  Changing their order, changes their effect. -->
  <!-- define Transforms -->
  <g transform="translate(50,0)" >       <!-- To define the X,Y start position. (0,0)='no change' -->
    <g transform="scale(5,5)" >          <!-- To change the X and Y scales.     (1,1)='no change' -->
      <!-- Draw Grid -->
      <g>                                    <!-- Draw the 50x50 Grid -->
        <text x="35" y="47" >50,50</text>    <!-- Label Top-Left corner -->
        <path d="M 50,50 L 100,50" /> <path d="M 50,60 L 100,60" /> <path d="M 50,70  L 100,70"  />
        <path d="M 50,80 L 100,80" /> <path d="M 50,90 L 100,90" /> <path d="M 50,100 L 100,100" />
        <path d="M 50,50 L 50,100" /> <path d="M 60,50 L 60,100" /> <path d="M 70,50  L 70,100"  />
        <path d="M 80,50 L 80,100" /> <path d="M 90,50 L 90,100" /> <path d="M 100,50 L 100,100" />
        <text x="80" y="110" >100,100</text> <!-- Label Bottom-Right corner -->
      </g>
    </g>
  </g>
</svg>


Can anyone give me advice,
Please, and Thanks,
JJ
Top
User avatar
microUgly
Site Admin
Posts: 2985
Joined: Sat Jun 02, 2007 3:13 pm
Contact:
Contact microUgly

Re: SVG Firefox, Opera, IE, Safari

Postby microUgly » Sat Jun 20, 2009 4:51 pm

It validates because it's valid XML (i.e. all your tags are closed), but it's not valid SVG.

To be fair, my understanding of how specific XML standards work (such as SVG) is very limited, but I think you need to add some xml namespaces. View the source of a blank Inkscape document to get an idea of what you are missing (note that some of the elements you'll see are not SVG elements, such as <sodipodi>)
Top
User avatar
microUgly
Site Admin
Posts: 2985
Joined: Sat Jun 02, 2007 3:13 pm
Contact:
Contact microUgly

Re: SVG Firefox, Opera, IE, Safari

Postby microUgly » Sat Jun 20, 2009 4:54 pm

... just tested and added xmlns="http://www.w3.org/2000/svg" as an attribute to your root SVG element and that got an instant result. So that may be all your are missing.
Top
JimJoyce
Posts: 37
Joined: Fri Jun 19, 2009 7:06 pm

Re: SVG Firefox, Opera, IE, Safari

Postby JimJoyce » Mon Jun 22, 2009 7:53 pm

Thanks, I think you are pointing me in the right direction.

In my grid.html, the 4th line was: <html xmlns="http://www.w3.org/1999/xhtml">
I've replaced that with: <html xmlns="http://www.w3.org/2000/svg">
I think that is what you mean. I'm completely ignorant about all this xml and xsl stuff.
Attempts at validation were giving me suggestions about need for an svg schema.

I thought your suggested insertion was giving me results in Firefox and Opera.
only to discover IE has replaced itself as default browser.
In IE:
The Scale, Top and Left appears, together with the 8 lines of description,
but the crux of the demo - the scaled-up Grid - fails to appear.
In Windows-Safari - no matter what is my 4th line in grid.html -
Everything appears correctly.

Many thanks, again, I'll keep trying.
Top
JimJoyce
Posts: 37
Joined: Fri Jun 19, 2009 7:06 pm

Re: SVG Firefox, Opera, IE, Safari

Postby JimJoyce » Tue Jun 23, 2009 1:54 am

Me, again.
Ive only just discovered Inkscape is a Graphics Editor. I'd assumed it was just a Forum.

Corrections to earlier statements.
It appears the html I posted is not what I'm using.
Moreover I've Changed this morning's amendment
to Add the SVG def to the XHTML one, not to replace it.

Code: Select all

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:svg="http://www.w3.org/2000/svg">
  <head>
    <title>Test Scale and Translate</title>
  </head>
  <body>
    <!-- New browsers deprecate '<embed>' -->
    <!-- Old browsers know nothing of '<object>' -->
    <!-- So ...  Belt and Braces. -->
    <object data="grid.svg" width="700" height="600" type="image/svg+xml">
      <embed src="nhp.svg" width="700" height="600" type="image/svg+xml" />
    </object>
    </body>
</html>


Note also I called the <object>/<embed> technique 'belt and braces'.
I coded the 'belt' but forgot the 'braces'. I've corrected that.

I noted the time of your reply: Saturday 6:54am, UK time.
Even if you're based in California. You were working late on Friday.
Thanks, JJ
Top
JimJoyce
Posts: 37
Joined: Fri Jun 19, 2009 7:06 pm

Re: SVG Firefox, Opera, IE, Safari

Postby JimJoyce » Tue Jun 23, 2009 2:24 am

Me, yet again.
The <embed> line is incorrect. It should read:
<embed src="grid.svg" type="image/svg+xml" width="700" height="600" />

Footnote: IE now works correctly, like Safari.
Firefox and Opera still show just a block of all the <text> lines from the SVG.
Thanks, again, JJ
Top
User avatar
microUgly
Site Admin
Posts: 2985
Joined: Sat Jun 02, 2007 3:13 pm
Contact:
Contact microUgly

Re: SVG Firefox, Opera, IE, Safari

Postby microUgly » Tue Jun 23, 2009 2:53 pm

JimJoyce wrote:In my grid.html, the 4th line was: <html xmlns="http://www.w3.org/1999/xhtml">I've replaced that with: <html xmlns="http://www.w3.org/2000/svg">

Sorry, don't change the HTML file, change the SVG file.
Top
SpareSimian
Posts: 1
Joined: Wed Jul 01, 2009 8:58 am

Re: SVG Firefox, Opera, IE, Safari

Postby SpareSimian » Wed Jul 01, 2009 9:04 am

JimJoyce wrote:Firefox and Opera still show just a block of all the <text> lines from the SVG.


Check the MIME type that the server claims for the file. (For Firefox, use Tools | Page Info.) IE attempts to interpret files even when you specify that you want them treated like text, which makes it hard to present HTML source code simply by serving the raw file. Firefox trusts the MIME type and will not attempt to guess what the file contains based on its name, extension, or initial content. Likely your server is serving .svg files as text/plain and needs a setting added for that extension.
Top
User avatar
aho
Posts: 180
Joined: Sun Nov 04, 2007 9:51 am
Contact:
Contact aho

Re: SVG Firefox, Opera, IE, Safari

Postby aho » Thu Jul 02, 2009 7:50 am

For the mime stuff... see:
How to Configure Apache to Serve SVG/SVGZ the Right Way
Top
olivercortinas

Re: SVG Firefox, Opera, IE, Safari

Postby olivercortinas » Sat Aug 08, 2009 6:38 am

Hi i have the same problem and i solved this adding the line you mention before, my problem now is how i can add that using xsl transformation?
any ideas?
Top
Post Reply

Return to “SVG / XML Code”