How to load external svg file with <use>? in WordPress? - php
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" >
Related
Dynamically insert SVG with php?
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.
SVG—included image does not show up [duplicate]
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.
ImageMagick/IMagick renders groups in SVGs offset
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!
SVG + PHP + Javascript
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.
SVG to PNG with imagick
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.