PHP get svg tag from SVG file, and show it in HTML in DIV

php file_get_contents svg
php svg
html canvas svg
svg link html
svg class html
php parse svg
svg vs canvas
circle tag in html

I want to read an SVG file and get the SVG tag from this file (because I want to show svg in html e.g. <div><svg>...</svg></div> without the xml header).

And show this svg tag in browser like HTML - print this SVG TAG like SVG image. Becouse now I'm gettong wrong output "DOMNodeList Object ( [length] => 1 ) ".

PHP

$doc = new DOMDocument();
$doc->load('http://example.com/logo.svg');
$svg = $doc->getElementsByTagName('svg');

echo "<div style='width: 100%, height: 100%; '>";
print_r($svg); // DOMNodeList Object ( [length] => 1 ) 
echo "</div>";

I found solution, but it is not exactly the answer for my question. So I will not mark it as a answer, but I leave here this solution. Maybe there will be somebody who will need it... :)

I just read file content, then I look for position of string "< svg" , and then substract this piece of code.

PHP

<?php 
$svg_file = file_get_contents('http://example.com/logo.svg');

$find_string   = '<svg';
$position = strpos($svg_file, $find_string);

$svg_file_new = substr($svg_file, $position);

echo "<div style='width:100%; height:100%;' >" . $svg_file_new . "</div>";

?>

Using SVG, I found solution, but it is not exactly the answer for my question. So I will not mark it as a answer, but I leave here this solution. Maybe there will be somebody  After some investigation, it turns out that PHP was unable to parse the beginning of the SVG file at the point where the XML version was defined: <? xml version = "1.0" encoding = "utf-8" ?> Luckily, CSS Tricks has documented an easy fix for this.

You were definitely on the right track with you first attempt. I could spot two small problems though:

  1. As you may have guessed, you tried to output a DOMNodeList object, which is what you will get from a call to getElementsByTagName. As the name implies, it is not a single node object but a collection of those so you would be interested in just the first found svg node (item(0) in code below).
  2. DOM* instances do not automatically get converted into strings when printed. Use the C14N() method instead for output.

Code:

$svg_file = <<<END_OF_SVG
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width='300px' height='300px'>
    <title>Test</title>
    <circle cx='150' cy='150' r='70' style='fill: gold;' />
</svg>
END_OF_SVG;

$doc = new DOMDocument();
$doc->loadXML($svg_file);
$svg = $doc->getElementsByTagName('svg');

echo '<div style="width: 100%; height: 100%;">';
echo $svg->item(0)->C14N();
echo '</div>';

How to Add Scalable Vector Graphics (SVG) to Your Web Page, If I save the SVG to a file, I can use it directly in an <img> tag. Is that you don't get to control the innards of the SVG with CSS like you can with the following two ways. You can drop that code right into an HTML document and the SVG image will show up A little PHP-specific thing here… it was demonstrated to me that  SVG stands for Scalable Vector Graphics. SVG is used to define graphics for the Web. SVG is a W3C recommendation. The HTML <svg> Element. The HTML <svg> element is a container for SVG graphics. SVG has several methods for drawing paths, boxes, circles, text, and graphic images. Browser Support. The numbers in the table specify the first browser

This seems to be the first hit for this topic in Google. Based on the other replies and what the original question was about, the answer to the original question is that getElementsByTagName returns an array, so you need to take the the first item in that array and use the saveHTML() method of DOMDocument. I made a short utility function to do just that.

function print_svg($file){
    $iconfile = new DOMDocument();
    $iconfile->load($file);
    echo $iconfile->saveHTML($iconfile->getElementsByTagName('svg')[0]);
}

HTML SVG, At some point, you'll want to embed your finely-crafted SVG directly into If you intend using any advanced SVG features such as CSS and scripting, the HTML5 <object> tag is and probably never will be part of any HTML or XHTML specification. Get 'PHP & MySQL: Novice to Ninja, 6th Edition' for free. More "Try it Yourself" examples below. The <svg> tag defines a container for SVG graphics. SVG has several methods for drawing paths, boxes, circles, text, and graphic images. To learn more about SVG, please read our SVG Tutorial.

SVG Text, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java  That tool involves using a JS library and looks overly complicated to me. An alternative is to drag your svg image into Chrome, then view the page source to see the svg code.

Web Coding Bible (HTML, CSS, Javascript, PHP, SQL, XML, SVG, , Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java  HTML HTML Tag Reference HTML Browser Support HTML Event Reference HTML Color Reference HTML Attribute Reference HTML Canvas Reference HTML SVG Reference HTML Character Sets Google Maps Reference CSS CSS Reference CSS Browser Support CSS Selector Reference Bootstrap 3 Reference Bootstrap 4 Reference W3.CSS Reference Icon Reference Sass Reference

SVG Line, "failsafe.html" Will be loaded Whenever an internet connection to /html.5/ cannot The comment symbol # can be used to update the cache by changing the manifest file. 1.7 Microformats Microformats attach meaningful semantics to HTML tags so that <div class="wcalendar"> <p class="wevent"> Tentative event: <span  The only way I can get the css to work is if I paste the svg data into the svg tags on the html page. Ideally what I want is to still use an external file for the images, but if I try that, the

Comments
  • Thank you. I edited question.
  • Sounds similar to this question stackoverflow.com/questions/10106407/…
  • What's wrong with <img src="log.svg" alt="Logo" />?
  • I need to copy the svg tag by jQuery and edit this svg code... It is not possible with <img src='logo.svg...'.