I am trying to reference/insert a dynamically uploaded svg file (image) from a products database using PHP. So far uploading the images work fine, as I can use them with an image tag and they show up fine.
<img src="image.svg" />
The XML also shows up correctly when I open them on my computer (using a text editor for example).
The problem is I can't seem to get them to be displayed inline so I can use styles like fill.
Here is my PHP code that dynamically displays the image:
<svg id="svg-image" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
<image id="main-image" xlink:href="<?php echo tep_href_link('images/' . $product_info['products_image']); ?>" />
</svg>
I tried changing image to path in the above code to get it to work, and the image just disappears on reload. Any help is greatly appreciated.
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'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'm trying to create a PHP generated SVG but I'm allready stuck on displaying a SVG file with an Javascript in it. The javascript is a pan and zoom function.
The code is:
<?
header("Content-Type: image/svg+xml");
?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<script xlink:href="SVGPan.js"/>
<g id="viewport" transform="translate(200,200)">
<polygon points="50,125 100,100 150,125 100,150" fill="green" stroke="black" stroke-width="1" />
</g>
</svg>
When opening this in Internet explorer, I can pan, but I am unable to zoom.
When opening this in Google Chrome, I the script runs correctly, it displays, I can zoom and pan but I get an error message
error on line 10 at column 1: Extra content at the end of the document
I searched google for it, and stackoverflow but I cannot find a solution.
Can you please help me with this?
I see you are getting analytics code added which is causing extra output at the end of the file. Usually even free hosts will not put this on a file when it is getting served with the correct MIME type. You may need to ask their support how to get the image/svg+xml mime type served like the text/javascript mime type (i.e. without adding the analytics code). I have never used them, but cPanel and other popular management systems allow you to manage MIME types for many other reasons including this one.
I need same output from Inkscape and Imagick.
This is the expected result, exported from Inkscape.
However, the PHP code below outputs the following faulty result.
PHP code:
<?php
$im = new Imagick();
$im->setResolution(400,400);
$im->setBackgroundColor(new ImagickPixel('transparent'));
$im->readImageBlob(str_replace(array("color1", "color2"), array("yellow", "blue"), file_get_contents("img.svg")));
$im->setImageFormat("png");
header("Content-type: image/png");
echo $im;
?>
SVG code:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="400">
<rect width="100%" height="100%" fill="green" />
<path d="M250 150 L150 350 L350 350 Z" opacity="0.9" fill="color1" />
<path d="M150 50 L50 250 L250 250 Z" opacity="0.9" fill="color2" />
</svg>
What version of PHP and ImageMagick are you running? Please share the relevant output of phpinfo(). Could this ImageMagick bug be affecting you? Or if you're not up to date, could another ImageMagic bug be affecting you?
EDIT: I don't have easy access to a server with PHP's ImageMagick libraries installed at the moment, but if I find one, I'll test the code provided and post my results.
EDIT2: Looks like others have the same issue, unless that forum post was also yours...
According to this forum post, you could try:
$im->setImageFormat("png32");
One person reported that worked, but another said it did not...
Inkscape uses the not ubiquitously supported opacity property. Use fill-opacity and stroke-opacity instead.
This is already fixed in current version of Imagick.