For some reason, Chrome is displaying the SVG without the images in its Image tags.
Here is a sample from my SVG:
<image xlink:href="blocker.png" height="312.666661" width="85.693825" y="16.479997" x="459.946664"/>
blocker.png is a local file, but I also tried uploading it to imgur, but that didn't work either.
Here is the svg tag:
<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
Here is what it looks like locally:
http://i.imgur.com/BDP8KpG.png
Here is what it looks like on a live webpage:
http://i.imgur.com/KVuxLI1.png
As you can see, the two players are missing. This doesn't happen when I upload the SVG online, but when I try to link that URL to my page, the same thing happens
Not sure if it's relevant, but here is the HTML code for the page:
<!DOCTYPE HTML>
<html>
<head>
<title>SVG</title>
<style>
img{
width: 100%;
height:auto;
max-width: 800px;
}
</style>
</head>
<body>
<div>
<img src="svg.svg"/>
</div>
</body>
</html>
PaulLeBeau's answer is right. But another solution is to use an embed tag instead of an img tag for the picture.
<embed src="svg.svg">
Here are some ways to embed svg images in HTML.
Another solution that worked for me is, open SVG image in any editor (Vs code or Notepad++) and replace
xlink:href="data:img/png;base64,
to
xlink:href="data:image/png;base64,
img to image.
Hope this helps if someone is still looking for it.
When you load an SVG into a webpage using an <img> element, the SVG has to be self-contained. It cannot link to third part resources like you are doing by linking to the PNG files. This a privacy restriction imposed by the browser.
Possible solutions are:
Convert your PNG to Data URI format and include them in your SVG that way.
Convert your blocker PNG(s) to actual SVG elements, such as a <path>.
I happened to find out that Chrome [v 58.0.3029.81 (64-bit)] doesn't show the image inside svg if the image file is not located at html root directory.
The .svg and the embedded .png files were placed in /images -folder, the .svg content came up right in Chrome, but not the embedded .png. When the .png was copied to (../) the html root, Chrome works.
However, Firefox [v 52.0.2 (32-bit)] seems to work fine when .svg and .png are in the same /images folder.
Edit: Actually in my case I load the svg with d3.xml(..) method for getting js handle to the actual svg elements.
Add this to the .htaccess file in the root:
AddType image/svg+xml .svg .svgz
This is what I had in the Headers >> Network >> Content-Type. Should be 'image/svg+xml' not 'txt/plain....'
By adding the above code, my SVGs rendered within img tags.
Thank you so much for taking the time to read this!
So, here's my SVG. I have it uploaded directly to my child theme's folder and I have it renamed to "test.svg.php". I have tried naming it without the .php too, as well as with "inline" in the beginning.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="256px"
height="256px" viewBox="0 0 256 256" xml:space="preserve">
<g id="extra">
<path fill-rule="evenodd" clip-rule="evenodd" d="M160.052,250.622c52.437-
48.419,49.47-116.202,19.158-158.051
c-18.584-25.655-43.479-41.734-74.663-47.401c-31.064-5.645-59.962,0.82-
87.352,18.333c-1.406-20.22,4.644-36.006,19.92-47.86
C46.139,8.639,56.551,5.53,67.934,5.532c41.745,0.004,83.492-
0.084,125.236,0.03c28.935,0.079,50.532,21.472,51.213,50.597
c0.231,9.845,0.051,19.7,0.051,29.549c0.001,37.757,0.057,75.518-
0.029,113.273c-0.041,18.4-7.362,33.176-22.787,43.537
c-7.544,5.065-15.922,7.986-
25.085,8.076C184.859,250.706,173.184,250.622,160.052,250.622z"/>
<path d="M102.5,216.797c0,5.635-3.111,10.203-6.949,10.203h-
6.602C85.111,227,82,222.432,82,216.797V86.203
C82,80.568,85.111,76,88.949,76h6.602c3.838,0,6.949,4.568,6.949,10.203V216.797z
"/>
<path d="M158.464,141.167c5.635,0,10.203,3.111,10.203,6.949v6.602c0,3.838-
4.568,6.949-10.203,6.949H27.87
c-5.635,0-10.203-3.111-10.203-6.949v-6I .602c0-3.838,4.568-6.949,10.203-
6.949H158.464z"/></g>
</svg>
I saw people talk about loading svgs with this function:
<?php get_template_part( 'content', 'extra.svg' ); ?>
I don't understand jack shit about the function, or about php in general, so I added it like 10 different times, with slight variations in my page template, in slightly 10 different ways to try and use it correctly.
Then, I finally edit my html file to add the following:
<svg viewBox="0 0 256 256" class="jest">
<use xlink:href="test.svg#extra" x="10" y="10" />
</svg>
I also tried every possible variation of this code to try and get it to work. I've been trying to figure it out for 4 days because I'm an idiot. Please, help me not waste my time anymore and let me know how to make it work, if possible.
Thank you!
EDIT: I should say that I'm doing this because I want to load a bunch of icons several times thoughout the page and I want it to be external, because I read that's the only way to get them to cache
Check out this post on CSS Tricks for more information on using SVGs internally vs externally.
Internal Load
Only do this if you want to manipulate the svg image with javascript or css hover effects, etc. You should rename your svg to test.svg (without .php at the end). Format your svg file as you had it at first, with all of the paths and points.
Then in in the WordPress template file where you want the svg to show up, write:
include get_stylesheet_directory() . '/test.svg';
or, if a php block is not already open, add <?php first and after:
<?php include get_stylesheet_directory() . '/test.svg'; ?>
External Load
Just use an image tag around similar code:
<img src="<?php echo get_stylesheet_directory() ?>/test.svg" >
I'm trying to convert an inline SVG to JPG using ImageMagick. I get a JPG back from the server but the remote image defined in the xlink is always blank. I tested with a SVG with some basic vector shapes and I do see those in the resulting JPEG but this example referencing an external image does not work.
<?php
$mySVG = '<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 500 700" style="enable-background:new 0 0 500 700;" xml:space="preserve" width="500"><image style="overflow:visible;" width="500" height="700" xlink:href="http://www.sportsupplygroup.com/SVG_POC/lifter.jpg" transform="matrix(0.948 0 0 0.948 11 36.4)"></image></svg>';
$svg = $mySVG;
$jpeg = new Imagick();
$jpeg->readImageBlob($svg);
$jpeg->setImageFormat("JPEG");
header("Content-Type: image/jpeg");
echo $jpeg;
?>
Being able to load different images into layers of the SVG gives us the ability to deliver some dynamic content. We want to use this in a HTML email but since SVG is not really supported, I want to convert to something that is like a JPG. Email would call a script like this.
<img src="createImage.php"> <!-- call php to get the image -->
Where the script could create the SVG with it's layers and send back a JPG. Is there a better way to convert SVG to JPG/PNG server side?
I've got an app that takes an SVG as input and converts to a PNG as output. I've run into a problem where if the SVG has grouped items using the tag, that content gets rendered way off to the right and down on the SVG.
This only happens using IMagick. If I open the SVG in Illustrator or Inkscape for PC, it looks fine. Here's what the SVG code looks like:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="2400px" height="3200px" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="SvgjsG1048" transform="rotate(0 1200 1600) translate(30.927835051559143 41.23711340207863) scale(0.9742268041237008 0.9742268041237009) " x="30.927835051559143" y="41.23711340207863">
<image id="SvgjsImage1049" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="aerosmith.png" width="2400" height="3200"></image>
</g>
</svg>
and here's the code I'm using to pull in and render:
// setup the SVG
$svg_front = new Imagick();
$svg_front->setBackgroundColor(new ImagickPixel('transparent'));
$svg_front->readImage($json->imageFront); // pull in the SVG image
// convert the SVG to PNG # 200 dpi - yes, it works!
$svg_front->setImageUnits(imagick::RESOLUTION_PIXELSPERINCH);
$svg_front->setImageResolution(200,200);
// set image format
$svg_front->setImageFormat('png');
// render the SVG
echo $svg_front;
Nothing out of the ordinary here. Removing the code to set the resolution doesn't make any difference, and I've tried resetPage to no effect as well.
Now, if I remove the tag and leave the image in there, then the SVG renders with no issue. However, I can't control whether the app sends grouped items or not, and IMagick needs to render it no matter what.
Here's the image when it gets rendered to PNG with a tag in the SVG: http://brainboxinteractive.com/bad-svg.png
And here's what is should look like: http://brainboxinteractive.com/what-it-should-look-like.png
Inkscape is installed on the server, so IMagick/ImageMagick is using it so I'm not sure where to start debugging and fixing this issue. Any help would be appreciated!
I have a svg which has some images embedded into it. Something like:
<?xml version='1.0' encoding='UTF-8'?>
<svg
width="483" height="710"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<title>Layer 1</title>
<image
id="svg_1"
y="0" x="0"
height="199" width="176"
xlink:href="http://192.168.3.2/images/1341920552_test.png"/>
</g>
</svg>
So when I do a convert via command line as my regular linux user it converts it to PNG just fine. But if I do the same with the user www-data then it does convert but the images dont showup in the resulting PNG other things like lines etc do showup.
The very same problem exists if I convert with the PHP imagick library. The attached images dont showup. Any sort of help is appreciated.
After a lot of experimentation's noticed that all users have this problem if they are logged in via ssh. The normal desktop user who is logged into the GUI session can convert without any issues.
I solved the issue by removing the http URL referring the embedded image and adding the local file system path. This slows down my app with the current design. But anyway this is solved for the time being.
I would like to know the reason though as to why this is like this.