I am new to SVG. I think there are two ways for me to insert SVG icons in my wordpress template.
1.: with "use"
<svg viewBox="0 0 100 100">
<use xlink:href="<?php bloginfo('template_directory'); ?>/icons/download.svg#Layer_1"></use>
</svg>
2.: as PHP file
get_template_part("icons/download")
("get_template_part" in this case refers to a "icon.php" file with the XML code that draws the SVG:
<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"
width="40px" height="33.999px" viewBox="0 0 40 33.999" style="enable-background:new 0 0 40 33.999;" xml:space="preserve">
<path style="fill-rule:evenodd;clip-rule:evenodd;" d="M39,14h-1v15.999c0,2.209-1.791,4-4,4H6c-2.209,0-4-1.791-4-4V14H1
c-0.552,0-1-0.448-1-1c0-0.552,0.448-1,1-1h1v-0.001h2v18c0,1.104,0.895,2,2,2h28c1.104,0,2-0.896,2-2v-18h2V12h1
c0.552,0,1,0.448,1,1C40,13.552,39.552,14,39,14z M20.708,13.706c-0.001,0.001-0.002,0.002-0.003,0.002l-0.009,0.009l0,0l0,0
c-0.087,0.087-0.189,0.147-0.294,0.196c-0.005,0.002-0.009,0.007-0.014,0.009c-0.369,0.163-0.814,0.098-1.117-0.205l-4.989-4.994
c-0.394-0.394-0.394-1.033,0-1.427c0.394-0.394,1.032-0.394,1.426,0L19,10.591V1c0-0.552,0.448-1,1-1c0.552,0,1,0.448,1,1v9.56
l3.261-3.264c0.393-0.394,1.031-0.394,1.425,0s0.394,1.033,0,1.427L20.708,13.706z"/>
</svg>
The first option doesn't work in IE (even 11!) without javascript.
The second option works in IE9 and above, that's cool! but i am not able to position this SVG. i have put it in a wrapper (".svg-wrapper") and tried to position it with CSS but the SVG appears outside of the wrapper in DOM :-(
Am i doing something wrong here?
echo '<li class="alignmiddle">' . '<div class="svgwrapper">' . get_template_part("icons/download") . '</div>' . $title . '.' . $path_info['extension'] . '<span class="filesize"> (' . $filesize . ')</span>' . '</li>';
Or is there a better solution at all?
I use the following code which allows you to define a fallback for older browsers. This method allows you to apply CSS in the same way you would a normal image. As SVG's are vector based you must assign a width and height.
<img src="<?php bloginfo('template_directory'); ?>/img/example.svg" onerror="this.onerror=null; this.src='<?php bloginfo('template_directory'); ?>/img/example.png'" alt="" />
Related
I am generating svg qr codes via php and getting result in php file the following code:
generate-svg.php
<?
include("../qrcode/qrlib.php");
QRcode::svg('Example');
?>
And I see in HTML code in browser:
<?xml version="1.0" encoding="utf-8"?>
<!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" xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" width="111" height="111" viewBox="0 0 111 111">
<desc></desc>
<rect width="111" height="111" fill="#ffffff" cx="0" cy="0" />
<defs>
<rect id="p" width="3" height="3" />
</defs>
<g fill="#000000">
<use x="12" y="12" xlink:href="#p" />
</g>
</svg>
Then I need to paste this svg code as an image into another php file. I do it like this:
svg.php
<?
echo '<object type="image/svg+xml" data="generate-svg.php" class="icon-qr"></object>';
?>
But I need to get the svg code and paste it as a picture. How can I do that?
If I use
echo file_get_contents('generate-svg.php');
I see this HTML code:
<!--?
include("../qrcode/qrlib.php");
QRcode::svg('Example');
?-->
<html><head></head><body></body></html>
One of the ways is to display the SVG by echoing the generated SVG thru the PHP file_get_contents command
So say if the generate-svg.php is like the following (As an example, I generate a red circle):
DEMO
<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" width="111" height="111" viewBox="0 0 111 111">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
Then use the following to display it (along with other things you want to display):
DEMO
<?php
echo "This is a line <br>";
echo file_get_contents("generate-svg.php");
echo "<br>This is another line <br>";
?>
[Additional Point]
If you are rendering the SVG thru a PHP script, then if you use file_get_contents on a local file it will faithfully display the PHP script instead of executing it unless you use a URL starting with http:// or https://. You can choose to use something like (assuming that the php script is named as generate-svg2.php) the following :
echo '<img src="generate-svg2.php">';
So, the generate-svg2.php can be:
DEMO
<?php
include('./phpqrcode-master/qrlib.php');
// outputs image directly into browser, as PNG stream
echo QRcode::svg('SO is good');
?>
then the script to display it (along with other HTML elements) can be :
DEMO
<?php
echo "This is a line <br>";
//echo file_get_contents("generate-svg.php");
echo '<img src="generate-svg2.php">';
echo "<br>This is another line x<br>";
?>
First something with Output Control Functions:
ob_start();
require 'generate-svg.php';
$svg = ob_get_clean();
file_put_contents('svgs/generated-svg.svg', $svg);
Then:
<img src="/svgs/generated-svg.svg" height="200" width="200" alt="QR code">
This question already has answers here:
Storing echoed strings in a variable in PHP
(2 answers)
Save an include's output to a string? [duplicate]
(5 answers)
Closed last month.
I am trying to echo a button that pulls content from a file that has variable set on it.
$vidplayBtn = require __DIR__ . '\..\vid-play-btn.php';
if( $displayButton ) {
$output = '<div class="hero-video-play"><div class="container">';
$output .= $vidplayBtn;
$output .= '</div></div>';
echo $output;
}
But the result outputs the button outside the containing HTML tag and adds a 1 character inside it.
<div class="flex__container_btn-play"> <p>What makes us different?</p> <svg .... </svg> </div>
<div class="hero-video-play"><div class="container">1</div></div>
Below is the content of vid-play-btn.php.
<a href="#jsModalVideo<?= $btn_play_c_video_id ?>" rel="modal:open" role="button" class="btn_play btn_play_color-<?= $btn_play_c_color ?>" title="<?= $btn_play_c_title ?>">
<div class="flex__container_btn-play">
<p><?= $btn_play_c_caption ?></p>
<svg version="1.1" class="play" x="0px" y="0px" height="100px" width="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"> <path class="stroke-solid" fill="none" stroke="white" d="M49.9,2.5C23.6,2.8,2.1,24.4,2.5,50.4C2.9,76.5,24.7,98,50.3,97.5c26.4-0.6,47.4-21.8,47.2-47.7 C97.3,23.7,75.7,2.3,49.9,2.5"/> <path class="stroke-dotted" fill="none" stroke="white" d="M49.9,2.5C23.6,2.8,2.1,24.4,2.5,50.4C2.9,76.5,24.7,98,50.3,97.5c26.4-0.6,47.4-21.8,47.2-47.7 C97.3,23.7,75.7,2.3,49.9,2.5"/> <path class="icon" fill="white" d="M38,69c-1,0.5-1.8,0-1.8-1.1 V32.1c0-1.1,0.8-1.6,1.8-1.1l34,18c1,0.5,1,1.4,0,1.9 L38,69z"/> </svg>
</div></a>
What could be causing it? Thanks in advance!
I have SVG icons in PHP files, for example google-plus.php:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24">
<path class="button-icon" d="M23,11H21V9H19V11H17V13H19V15H21V13H23M8,11V13.4H12C11.8,14.4 10.8,16.4 8,16.4C5.6,16.4 3.7,14.4 3.7,12C3.7,9.6 5.6,7.6 8,7.6C9.4,7.6 10.3,8.2 10.8,8.7L12.7,6.9C11.5,5.7 9.9,5 8,5C4.1,5 1,8.1 1,12C1,15.9 4.1,19 8,19C12,19 14.7,16.2 14.7,12.2C14.7,11.7 14.7,11.4 14.6,11H8Z" />
</svg>
I need to create variable $icon_google_plus associated with this file to include it and display the SVG code easily everywhere in my template (I'm using WordPress).
If you can, I would like examples, how to include that variable in these situations (TheVariableHere = included $icon_google_plus):
Situation 1 - PHP
function download_link($atts, $download_title) {
$download_link = $atts[link];
$download_description = $atts[description];
return '<div class="download"> TheVariableHere <div class="download-info"><a href="'.$download_link.
'">'.$download_title.
'</a><br><span>'.$download_description.
'</span></div></div>';
}
add_shortcode('download', 'download_link');
Situation 2 - HTML
<li>
<a href="/обратная-связь" class="icon" title="Обратная связь">
TheVariableHere
<span>Обратная связь</span>
</a>
</li>
I'll be very grateful!
Sorry, I'm very dumb in PHP, it's very hard to learn it even with tutorials.
Instead of placing svg in PHP file put the code in PHP global variable and declare this in function.php so you can use it anywhere in theme.
global $googlePlusIcon;
$googlePlusIcon = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path class="button-icon" d="M23,11H21V9H19V11H17V13H19V15H21V13H23M8,11V13.4H12C11.8,14.4 10.8,16.4 8,16.4C5.6,16.4 3.7,14.4 3.7,12C3.7,9.6 5.6,7.6 8,7.6C9.4,7.6 10.3,8.2 10.8,8.7L12.7,6.9C11.5,5.7 9.9,5 8,5C4.1,5 1,8.1 1,12C1,15.9 4.1,19 8,19C12,19 14.7,16.2 14.7,12.2C14.7,11.7 14.7,11.4 14.6,11H8Z" /></svg>';
I want to load the svg file based on a parameter.
e.g., if Parameter = A then load A.svg, if parameter = B then load B.svg, and so on..
For this case, I'm using Codeigniter, so on Model I load the svg file like this:
Model.php
$svgTag = '<div id="svg-content" >'
. '<input type="radio" name="test"/>'
. file_get_contents( APPPATH. 'views/svg/'.$param.'.svg', TRUE)
. '</div>'
After that, I load the $svgTag on view.
View.php
<html>
<body>
<?php echo $svgTag; ?>
</body>
</html>
My expectation is the svg file will be loaded in the div#svg-content, but the actual result is that svg is loaded after tag <body> like this:RESULT
<html>
<body>
<svg>........</svg> <!-- Loaded SVG File -->
<div id="svg-content" >
<input type="radio" name="test"/>
</div>
</body>
</html>
I wanna add the event on radio button, IF it's clicked, then change the color of SVG image.
IF I use <object> I cannot apply this style.
NOTE: This is the content of file that I try to load:
<?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 1280 800" enable-background="new 0 0 1280 800" xml:space="preserve">
<g>
<polygon points="358.3,524.2 328.3,524.2 328.3,665 415,665 415,640 358.3,640 "/>
</g>
</svg>
Is there any way to get the result like this..?
<html>
<body>
<div id="svg-content" >
<input type="radio" name="test"/>
<svg>........</svg> <!-- Loaded SVG File -->
</div>
</body>
</html>
Use the <img> tag to embed it in page, this will give you full controle of placement in html
$svgTag = '<div id="svg-content" >'
. '<input type="radio" name="test"/>'
. '<img src="'.APPPATH. 'views/svg/'.$param.'.svg'.'" alt="">'
. '</div>'
Here is awesome answer on which to use <img>, <object>, or <embed> for SVG files?
Finally I found the answer.
It should be use fread() function to load the SVG file.So, it should be like this:
$fh = fopen(APPPATH. 'views/svg/'.$param.'.svg', 'r');
$svg_file = fread($fh, 25000);
$svgTag = '<div id="svg-content" >'
. '<input type="radio" name="test"/>'
. $svg_file
. '</div>'
i have a problem with SVGs (different sizes) and effetcs (strokes, shadows etc.)
The stroke (for example) has not the same size because the icon B is smaller and it is "zoomed" to 500px.
What is the correct way to fix this issue?
must i calculate the effect for every SVG individually? :/
or is there an option to only zoom the SVG and not the effect?
or can i recalculate (with PHP) the SVGs? So that every SVG has the same size?
FIDDLE
http://jsfiddle.net/tqef7qkp/
CSS
stroke: #39A02E;
stroke-width: 5;
Example
A)
<svg xml:space="preserve"
preserveAspectRatio= "xMinYMin meet"
enable-background="new 0 0 500 500"
viewBox="0 0 500 500"
width="500px"
height="500px"
y="0px"
x="0px"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg" version="1.1">
B)
<svg xml:space="preserve"
preserveAspectRatio= "xMinYMin meet"
enable-background="new 0 0 50 50"
viewBox="0 0 50 50"
width="500px"
height="500px"
y="0px"
x="0px"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg" version="1.1">
You can specify stroke-widths in percentages, not just userSpace units. You can also specify shadow filters the same way (in objectBoundingBox units). This will size your strokes to the size of your svg's vs. the size of your viewboxes.
<style type="text/css" >
<![CDATA[
g { stroke: #39A02E;
stroke-width: 1;
fill:url(#rgrad);}
]]>
</style>
That could fix the stroke problem.
The output: