Guest aZies Posted March 22, 2007 Share Posted March 22, 2007 Hey there. I'm on my exam project in school, and I need to make a tutorial about SVG.But now when I'm making the website for the tutorial, I fail to put XML, SVG and HTML together in one page? - how do you do that?Can XML control layout, and use the same tags as HTML, so I can skip the HTML code, and just do it in XML? And how do I put SVG objects inside my documents?I'm new to all this XML and its extensions, but now I've read alot of tutorials about it, but I fail to completely understand it aperently :/.Thanks in advance.aZies. Link to comment Share on other sites More sharing options...
boen_robot Posted March 22, 2007 Share Posted March 22, 2007 It doesn't seem wise to make a tutorial for something you don't understand enough.If you look at the SVG tutorial at W3Schools, you'll notice that SVG is just NOT embed in XHTML. The reason is that SVG can not be embed in HTML, and IE renders XHTML pages as HTML.In order to embed SVG in XHTML, you need to serve the page with the XHTML MIME type (application/xhtml+xml). IE however doesn't support this MIME type and shows a download box instead. Negotiating the MIME type and the SVG graphic respectively could be risky.The other way to embed SVG in (X)HTML is to use the "object" element. However, whether it will work or not depends very much on the SVG viewer that the browser will use. Adobe SVG Viewer for example doesn't really like "object" and prefers "embed" instead. Making it work with "object" could be tricky.XML does not control layout. XML is a set of rules for creating markup languages. Both XHTML and SVG are XML based. It takes another application to read the XML language and do something with it. For example, XHTML requires XHTML aware browser to render properly, and SVG requires SVG viewer, which could be embed inside XHTML as well. Cursom languages (made by yourself) would also require something else to make the XML "work". When XML is used for a web page, this would most certanly mean that you need a way to convert your XML into XHTML or SVG (or both, which is where XMLs beauty comes). Link to comment Share on other sites More sharing options...
Guest FirefoxRocks Posted March 24, 2007 Share Posted March 24, 2007 If you do not understand about SVG yet then I wouldn't suggest that you make a tutorial about it I have successfully gotten SVG embedded in XHTML on my pages. Internet Explorer uses PNG though, because of content negotiation.You need PHP to do this and I will show you how here:First, create a file called mime.php and have this as the content: <?php$mime = 'text/html';if(strstr($_SERVER['HTTP_USER_AGENT'], 'W3C_Validator') ||strstr($_SERVER['HTTP_USER_AGENT'], 'WDG_SiteValidator') ||strstr($_SERVER['HTTP_USER_AGENT'], 'W3C-checklink') ||strstr($_SERVER['HTTP_USER_AGENT'], 'Web-Sniffer') ||strstr($_SERVER['HTTP_USER_AGENT'], 'Googlebot') ||strstr($_SERVER['HTTP_USER_AGENT'], 'Poodle predictor')){ $mime = 'application/xhtml+xml';}else { if(stristr($_SERVER['HTTP_ACCEPT'], 'application/xhtml+xml')) { if(preg_match("/application\/xhtml\+xml;q=([01]|0\.\d{1,3}|1\.0)/i", $_SERVER['HTTP_ACCEPT'], $matches)) { $xhtml_q = $matches[1]; if(preg_match("/text\/html;q=q=([01]|0\.\d{1,3}|1\.0)/i", $_SERVER['HTTP_ACCEPT'], $matches)) { $html_q = $matches[1]; if((float)$xhtml_q >= (float)$html_q) {$mime = 'application/xhtml+xml'; } } } else {$mime = 'application/xhtml+xml';} } }?> That is called content-negotiation, which is as described above, risky for SVG.Now create doctype.php, which will send out our doctype: <?phprequire("mime.php");if($mime=="application/xhtml+xml"){$xmlpi = '<?xml version="1.0" encoding="iso-8859-1"?>';$doctype = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">';$html = '<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xml:lang="en">';}else{$doctype = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">';$html = '<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">';}header('Content-Type: ' . $mime . ';charset=iso-8859-1');header('Vary: Accept');if($xmlpi!=''){echo "$xmlpi\n$doctype\n$html\n";}else{echo "$doctype\n$html\n";}?> For the page content: <?php require("doctype.php"); ?><head><title>My SVG Page</title></head><body><h1>Example SVG Image</h1><div><?php require("mime.php");if($mime=='application/xhtml+xml'){echo "<svg:svg><svg:g>...(your SVG code)...</svg:g></svg:svg>";}elseif($mime=='text/html'){echo "<img src="same picture.png/jpeg" alt="The PNG version" />";}?></div><p>If you use Internet Explorer, the PNG image will show.</p></body></html> Notice that it isn't <svg> it is <svg:svg> EVERY SVG element needs to have the namespace svg: in front of the actual element for it to work. Internet Explorer goes to text/html so it will show the PNG image instead. You will want to give an explanation for that.Now if you want to embed an SVG image into the XHTML page, do the same above except for the PHP code in the XHTML document, do: <?phprequire("mime.php");if($mime=='application/xhtml+xml'){echo "<object type='image/svg+xml' style='width:#pixels;height:#pixels' data='picture.svg'>Alternate Text</object>";}elseif($mime=='text/html'){echo "<img src='same picture.png/jpeg' alt='The PNG version' />";}?> You don't need the doctype.php file then, if you type the DOCTYPE at the top with the NORMAL <html> element attributes.Hope this helps, be sure to learn SVG first though. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now