SVG Object displaying SVG Code instead of SVG Graphic? - object
on my website I have an SVG Object which is meant to display a vector image, whilst testing this offline, everything worked fine, but when I uploaded it onto my website, the object displays the code of the SVG in question. viewable here: link to site with svg
Object Code:
<object type="image/svg+xml" data="ppvisual.svg" width="702px" height="259.37px">
<param name="colour" value="<?php echo $colour; ?>" />
<param name="textcolour" value="<?php echo $textcolour; ?>" />
<param name="lanyardtext" value="<?php echo $lanyardtext; ?>" />
</object>
Doctype: (incase that has anything to do with it?)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
SVG code:
<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="702px" height="259.37px" viewBox="0 0 702 259.37" enable-background="new 0 0 702 259.37" xml:space="preserve">
<g>
<g>
<polygon fill="none" points="0,80.811 0.053,113.105 48.17,112.998 48.117,80.705 "/>
<image overflow="visible" width="109" height="188" xlink:href="fitment1.png" transform="matrix(4.854395e-04 0.2963 -0.2559 5.628683e-04 48.1172 80.7046)">
</image>
</g>
</g>
<g>
<path fill-rule="evenodd" clip-rule="evenodd" fill="param(colour) white" d="M43.807,108.613c-0.241,0-0.476-0.086-0.659-0.248
c-0.217-0.189-0.341-0.463-0.341-0.752v-22.26c0-0.502,0.372-0.926,0.87-0.991l633.935-83.34c0.043-0.005,0.086-0.008,0.129-0.008
c0.264,0,0.52,0.104,0.707,0.293l22.26,22.26c0.188,0.188,0.293,0.442,0.293,0.707v61.08c0,0.553-0.447,1-1,1h-22.26
c-0.553,0-1-0.447-1-1v-59.94L43.938,108.605C43.894,108.611,43.851,108.613,43.807,108.613z"/>
<path fill="#636466" d="M677.74,2.013L700,24.273v61.08h-22.26v-61.08l-633.933,83.34v-22.26L677.74,2.013 M677.74,0.013
c-0.086,0-0.174,0.005-0.26,0.017L43.546,83.371c-0.995,0.13-1.739,0.979-1.739,1.982v22.26c0,0.576,0.248,1.125,0.681,1.504
c0.367,0.322,0.836,0.496,1.319,0.496c0.086,0,0.174-0.006,0.261-0.016L675.74,26.553v58.8c0,1.104,0.896,2,2,2H700
c1.105,0,2-0.896,2-2v-61.08c0-0.53-0.211-1.039-0.586-1.414l-22.26-22.26C678.777,0.222,678.268,0.013,677.74,0.013L677.74,0.013z
"/>
</g>
<g>
<path fill-rule="evenodd" clip-rule="evenodd" fill="param(colour) white" d="M43.807,108.613c-0.552,0-1-0.447-1-1v-22.26c0-0.552,0.448-1,1-1
H700c0.404,0,0.77,0.244,0.924,0.617c0.155,0.374,0.069,0.804-0.217,1.09l-22.26,22.26c-0.188,0.188-0.441,0.293-0.707,0.293
H43.807z"/>
<path fill="#636466" d="M700,85.353l-22.26,22.26H43.807v-22.26H677.74H700 M700,83.353h-22.26H43.807c-1.104,0-2,0.896-2,2v22.26
c0,1.104,0.896,2,2,2H677.74c0.53,0,1.039-0.211,1.414-0.586l22.26-22.26c0.572-0.572,0.743-1.432,0.434-2.18
C701.538,83.84,700.809,83.353,700,83.353L700,83.353z"/>
</g>
<rect x="0" y="186.505" fill-rule="evenodd" clip-rule="evenodd" fill="param(colour) white" width="702" height="70.865"/>
<path fill="#636466" d="M702,257.37H0v2h702V257.37z M702,186.505v-2l0,0H0v2H702"/>
<g>
<defs>
<polygon id="SVGID_1_" points="677.74,107.613 43.807,107.613 43.807,85.353 677.74,85.353 700,85.353 "/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" overflow="visible"/>
</clipPath>
<g clip-path="url(#SVGID_2_)">
<text transform="matrix(1 0 0 1 372 102.272)" fill="param(textcolour) white" font-family="'Verdana-Bold'" font-size="16" text-anchor="middle" content-value="param(lanyardtext)">Enter Your Text Enter Your Text Enter Your Text Enter Your Text</text>
</g>
</g>
<g>
<defs>
<rect id="SVGID_3_" x="0" y="186.505" width="702" height="70.865"/>
</defs>
<clipPath id="SVGID_4_">
<use xlink:href="#SVGID_3_" overflow="visible"/>
</clipPath>
<g clip-path="url(#SVGID_4_)">
<text transform="matrix(1 0 0 1 350 240.0977)" fill="param(textcolour) white" font-family="'Verdana-Bold'" font-size="50.9319" text-anchor="middle" content-value="param(lanyardtext) white">Enter Your Text Enter Your Text Enter Your Text Enter Your Text</text>
</g>
</g>
<script type="text/ecmascript" xlink:href="param.js" />
</svg>
I'm thinking this might be something about server setting? anybody have any idea how I would fix it?
Thanks in advance.
You are sending the SVG data with a mime type of text/plain. You need to reconfigure your web server to send it with a mime type of image/svg+xml. How you do that depends on what web server you are using.
Related
How to add a hover effect to an html img tag with an SVG as it's src
I understand that I could simply swap one image for another on hover, or I could move the position of a sprite as a background, but is there any way I can change the fill of the svg on hover in some other way?
I originally thought the below would work but have discovered it does not work if the SVG is used as the src of an html image tag.
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="17px" viewBox="0 0 24 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>
#Page-1:hover #Shape{
fill: #00A49E !important;
}
</style>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Desktop" transform="translate(-454.000000, -1073.000000)" fill-rule="nonzero" fill="#9B9B9B">
<g id="email" transform="translate(454.000000, 1073.000000)">
<g id="Group">
<g id="Shape">
<path d="M22.2254762,0 C23.2055186,0 24,0.797143779 24,1.78716696 L24,15.212833 C24,16.1998581 23.2014771,17 22.2254762,17 L1.77452382,17 C0.794481378,17 0,16.2028562 0,15.212833 L0,1.78716696 C0,0.800141908 0.798522933,0 1.77452382,0 L22.2254762,0 Z M10.6054162,9.87197556 L2.12964982,3.11784921 C1.93425396,2.96214312 1.77777778,3.0378817 1.77777778,3.28512523 L1.77777778,14.7628523 C1.77777778,15.0060917 1.97746978,15.2105263 2.22380231,15.2105263 L21.7761977,15.2105263 C22.0198764,15.2105263 22.2222222,15.0100958 22.2222222,14.7628523 L22.2222222,3.28512523 C22.2222222,3.04188583 22.0646837,2.96298968 21.8703502,3.11784921 L13.3945838,9.87197556 C12.624058,10.4859884 11.3756236,10.4857346 10.6054162,9.87197556 Z M12.3507416,8.42142877 L20.3224534,2.06897091 C20.5152517,1.91533479 20.473415,1.78947368 20.2269738,1.78947368 L3.77302622,1.78947368 C3.52161302,1.78947368 3.48383733,1.91460885 3.67754658,2.06897091 L11.6492584,8.42142877 C11.8420567,8.57506489 12.1570324,8.57579083 12.3507416,8.42142877 Z"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
SVG size controll
I am new to svg and have a question, how to make svg element to get bigger? How can i control it? player container here is my code: <div class="player-container"> <svg width="100%" height="100%" viewBox="0 0 97 97" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.153808594"> <g id="Car-concept" transform="translate(-193.000000, -733.000000)" fill="#8E95D7"> <g id="Group-10" transform="translate(127.000000, 596.000000)"> <g id="Group-14" transform="translate(66.000000, 137.000000)"> <circle id="Oval" cx="48.5" cy="48.5" r="48.5"></circle> </g> </g> </g> </g> </svg> <svg class="moving-outline" width="100%" height="100%" viewBox="0 0 453 453" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle cx="226.5" cy="226.5" r="216.5" stroke="#646DBE" stroke-width="10" /> </svg> <h3 class="time-display">45%</h3> </div>
Trying to use svg sprites
Does not work SVG sprites on my template. I google it a lot but found solutions did not work for me. when I use: <svg> <use xlink:href="icons.svg#icon"></use> </svg> browser shows 'shadow-root closed' when I trying to use SVG as inline, g tag inside SVG tag moves far away from parent SVG tag. How to make my SVG file is useful? My svg file > Codepen
From your file with icons, first make a sprite of icons.
To do this, wrap the code of each icon with <symbol> tags instead
of the group tag <g>
Then save as a stand-alone icons.svg file and add it to the same folder next to index.html
Add this file to your application’s HTML
<object type="image/svg+xml" data="icons.svg">
Your browser does not support SVG
</object>
or specify the full path if the file with icons is in another folder
<object type="image/svg+xml" data="images/icons.svg">
Your browser does not support SVG
</object>
An example of your converted sprite icon file:
<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<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 676 289" style="enable-background:new 0 0 676 289;" xml:space="preserve">
<style type="text/css">
.st0{fill:#EA3B58;}
.st1{fill:#FFFFFF;}
.st2{fill:#4C76BE;}
.st3{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
.st4{fill:#F99400;}
.st5{fill:#4C75A3;}
.st6{fill:#00C7FF;}
.st7{fill:#FC5345;}
.st8{fill:#71C644;}
</style>
<symbol id="instagram">
<circle class="st0" cx="68.8" cy="52" r="29.1"/>
<g>
<path class="st1" d="M82.6,44.5c-0.2-1.9-0.9-3.5-2.3-4.8c-1.4-1.4-3.2-2-5.2-2.1c-3.3-0.2-11.2-0.3-13.9,0.2
c-3.2,0.5-5.2,2.4-6.1,5.5C54.5,45.6,54.6,56.6,55,59c0.5,3.2,2.4,5.3,5.7,6.1c2.2,0.6,13.1,0.5,15.6,0.1c3.2-0.5,5.3-2.4,6.2-5.6
C83.1,57.2,82.8,46.7,82.6,44.5z M80,58.6c-0.4,2.5-2,4-4.5,4.3c-2.3,0.2-12.4,0.4-14.5-0.2c-2-0.6-3.2-1.9-3.5-4
c-0.3-1.9-0.4-11.6,0-14.2c0.4-2.4,2-4,4.5-4.2c2.5-0.3,11.5-0.3,13.9,0.1c2.5,0.4,4,2,4.2,4.5C80.3,47,80.4,56.1,80,58.6z
M68.8,44.3c-4,0-7.2,3.2-7.2,7.2c0,4,3.2,7.2,7.2,7.2c4,0,7.2-3.2,7.2-7.2C76,47.5,72.8,44.3,68.8,44.3z M68.7,56.2
c-2.5,0-4.6-2.1-4.6-4.7c0-2.6,2.1-4.7,4.7-4.7c2.6,0,4.7,2.1,4.7,4.7C73.4,54.1,71.3,56.2,68.7,56.2z M78,44
c0,0.9-0.8,1.7-1.7,1.7s-1.7-0.7-1.7-1.7c0-1,0.8-1.7,1.7-1.7C77.2,42.3,78,43.1,78,44z"/>
</g>
</symbol>
<symbol id="facebook">
<circle class="st2" cx="139" cy="52" r="29.1"/>
<path class="st3" d="M143.8,41.1c1,0,1.9,0,2.9,0c0.1,0,0.2,0,0.4,0v-5c-0.5-0.1-1.1-0.1-1.6-0.2c-1,0-2-0.1-3-0.1 c-1.5,0-3,0.4-4.2,1.3c-1.4,1-2.2,2.5-2.5,4.2c-0.1,0.7-0.2,1.4-0.2,2.2c0,1.1,0,2.3,0,3.4v0.4h-4.8V53h4.8v14.1h5.9V53h4.8c0.2-1.9,0.5-3.7,0.7-5.7c-0.4,0-0.7,0-1.1,0c-1.4,0-4.5,0-4.5,0s0-2.8,0-4C141.5,41.7,142.5,41.2,143.8,41.1z"/>
</symbol>
<symbol id="ok">
<circle class="st4" cx="209.2" cy="52" r="29.1"/>
<g>
<path class="st1" d="M212.7,59.3c0.7,0.6,1.3,1.1,1.8,1.7c1,0.9,1.9,1.9,2.8,2.9c0.9,1.1,0.8,2.5-0.2,3.4c-1,0.9-2.4,1-3.5,0 c-1.3-1.3-2.6-2.6-3.9-3.9c-0.2-0.2-0.3-0.5-0.5-0.7c-1,0.9-1.7,1.7-2.5,2.4c-0.7,0.7-1.4,1.4-2.1,2c-1.1,1.1-2.6,1.1-3.6,0.1c-1.1-1-1.1-2.5,0-3.7c1.3-1.3,2.6-2.6,3.9-4c0.1-0.1,0.2-0.3,0.3-0.3c-1.5-0.7-3-1.3-4.4-2.1c-1-0.6-1.4-1.7-1.1-2.8c0.5-1.7,2.1-2.3,3.7-1.6c1.1,0.5,2.2,1.1,3.3,1.3c2.6,0.7,5,0.2,7.4-1c0.5-0.2,1-0.5,1.5-0.6c1.2-0.2,2.3,0.5,2.7,1.6c0.4,1.1,0.1,2.4-1,3c-1.2,0.7-2.5,1.2-3.8,1.8C213.4,59.1,213.2,59.2,212.7,59.3z"/>
<path class="st1" d="M200.9,44.2c-0.2-3.9,3.1-8.3,8.3-8.3c5.2,0,8.5,4.5,8.4,8.5c-0.1,4.6-3.8,8.3-8.4,8.3
C203.7,52.5,200.6,47.9,200.9,44.2z M209.1,47.5c1.9,0,3.4-1.4,3.4-3.3c0-1.8-1.5-3.2-3.3-3.2c-1.9,0-3.3,1.4-3.3,3.2
C205.9,46,207.4,47.5,209.1,47.5z"/>
</g>
</symbol >
<symbol id="vk">
<circle class="st5" cx="279.4" cy="52" r="29.1"/>
<g>
<path class="st1" d="M281.5,47.6c0,1.1,0,2.1,0,3.2c0,0.3,0.1,0.6,0.3,0.8c0.3,0.5,0.7,0.5,1.1,0.2c0.6-0.5,1.1-1.1,1.5-1.7
c1.1-1.6,2-3.4,2.8-5.2c0,0,0-0.1,0.1-0.1c0.3-0.7,0.5-0.8,1.2-0.8c1.7,0,3.4,0,5.1,0c0.3,0,0.6,0,0.8,0.1
c0.4,0.1,0.6,0.4,0.5,0.8c-0.1,0.5-0.3,1-0.5,1.4c-0.8,1.5-1.8,2.8-2.8,4.1c-0.5,0.7-1.1,1.4-1.6,2.1c-0.5,0.8-0.5,1.3,0.2,2
c0.9,0.9,1.8,1.7,2.6,2.6c0.6,0.7,1.2,1.5,1.8,2.2c0.2,0.2,0.3,0.5,0.3,0.8c0.1,0.6-0.1,0.9-0.7,1.1c-0.3,0.1-0.6,0.1-0.9,0.1
c-1.5,0-3,0.1-4.4,0.1c-0.8,0-1.5-0.3-2-0.8c-0.8-0.7-1.4-1.5-2.2-2.2c-0.3-0.3-0.6-0.6-0.9-0.9c-0.1-0.1-0.2-0.2-0.4-0.3
c-0.4-0.2-0.7-0.2-1,0.1c-0.4,0.4-0.6,0.9-0.7,1.5c-0.1,0.5-0.1,0.9-0.1,1.4c-0.1,0.6-0.4,1-1,1c-2.1,0.1-4.2,0.2-6.2-0.8
c-1.8-0.9-3.4-2.1-4.7-3.7c-2.8-3.4-4.9-7.2-6.6-11.2c-0.1-0.2-0.2-0.4-0.3-0.7c-0.1-0.5,0.1-0.8,0.5-0.9c0.2,0,0.4-0.1,0.7-0.1
c1.4,0,2.8,0,4.2,0c0.7,0,1.2,0.3,1.5,1c0.7,1.8,1.6,3.4,2.6,5.1c0.4,0.7,0.8,1.3,1.5,1.8c0.3,0.2,0.6,0.4,1,0.3
c0.1,0,0.2-0.1,0.3-0.2c0.3-0.4,0.4-0.9,0.4-1.4c0.2-1.2,0.2-2.4,0.1-3.6c0-0.4-0.1-0.8-0.2-1.2c-0.2-0.7-0.7-1-1.3-1.2
c-0.1,0-0.3-0.1-0.4-0.2c0.1-0.1,0.2-0.3,0.3-0.4c0.3-0.4,0.7-0.5,1.2-0.6c1.7-0.3,3.4-0.3,5.1-0.1c0.2,0,0.3,0,0.5,0.1
c0.8,0.2,1,0.4,1.1,1.3c0.1,0.7,0,1.4,0,2.1C281.5,47,281.5,47.3,281.5,47.6C281.5,47.6,281.5,47.6,281.5,47.6z"/>
</g>
</symbol>
<symbol id="twitter">
<circle class="st6" cx="419.9" cy="52" r="29.1"/>
<path class="st3" d="M413.7,59.9c-3.4-0.1-5.5-2.5-6-4.5c0.9,0.2,1.9,0.1,2.8-0.1c0,0,0,0,0.1,0c-1.8-0.4-3.2-1.4-4.2-3
c-0.6-1-1-2.2-0.9-3.4c0.9,0.5,1.9,0.8,2.9,0.8c-1.4-1-2.3-2.3-2.7-3.9c-0.4-1.6-0.1-3.2,0.7-4.7c3.5,4.1,7.9,6.4,13.3,6.8
c0-0.3-0.1-0.5-0.1-0.7c-0.2-1.5,0.1-2.9,0.9-4.2c1-1.6,2.5-2.6,4.4-2.9c2.2-0.4,4.1,0.3,5.7,1.8c0.1,0.1,0.2,0.1,0.3,0.1
c1.3-0.3,2.6-0.8,3.8-1.4c0,0,0.1,0,0.1,0c0,0,0,0,0,0c-0.5,1.5-1.4,2.7-2.8,3.5c1.3-0.1,2.4-0.5,3.6-1c0,0,0,0,0,0
c-0.2,0.3-0.5,0.7-0.7,1c-0.7,0.8-1.5,1.6-2.4,2.2c-0.1,0.1-0.1,0.1-0.1,0.2c0,1,0,1.9-0.1,2.9c-0.2,2-0.8,3.9-1.7,5.8
c-0.9,1.9-2,3.6-3.5,5.1c-2.5,2.5-5.4,4.2-8.9,5c-1.2,0.3-2.4,0.4-3.6,0.4c-3.7,0.1-7.2-0.8-10.4-2.8c0,0-0.1-0.1-0.2-0.1
c2.3,0.2,4.4,0,6.5-0.9C411.7,61.2,412.7,60.7,413.7,59.9z"/>
</symbol>
<symbol id="GooglePlus">
<circle class="st7" cx="349.7" cy="52" r="29.1"/>
<g>
<path class="st1" d="M343.8,49.3c0,0.1,0,0.1,0,0.2c0,1.3,0,4.3,0,4.3s5.6,0,5.9,0c0,0.4-0.5,2.2-2.2,3.3c-1,0.7-2.1,1-3.2,1
c-0.8,0.1-1.6,0-2.4-0.3c-2.5-0.8-4.3-3-4.6-5.7c-0.1-0.7,0-1.3,0.1-2c0.7-3.2,3.8-5.6,7.3-5.1c1.5,0.2,2.4,0.9,3.2,1.6
c1.1-1.1,2.1-2.1,3.2-3.2c-0.3-0.2-0.9-0.8-2-1.4c-1.6-0.9-3.4-1.4-5.2-1.4c-0.4,0-0.7,0-1.1,0c-0.6,0-1.2,0.1-1.8,0.3
c-2.4,0.6-4.4,1.9-5.9,3.8c-1.5,1.8-2.3,4-2.4,6.3c-0.1,1,0,2,0.2,3c0.6,2.7,2.1,4.9,4.3,6.6c1.8,1.3,3.7,2,5.9,2.1
c1.2,0.1,2.4,0,3.6-0.4c2.2-0.6,4.1-1.7,5.4-3.6c2-2.7,2.5-6.1,1.9-9.3C350.7,49.3,347.3,49.3,343.8,49.3z"/>
<polygon class="st1" points="367.6,49.4 363.8,49.4 363.8,45.7 363.8,45.6 363.7,45.6 360.9,45.6 360.8,45.6 360.8,45.7
360.8,49.4 357,49.4 356.9,49.4 356.9,49.5 356.9,52.3 356.9,52.4 357,52.4 360.8,52.4 360.8,56.2 360.8,56.3 360.9,56.3
363.7,56.3 363.8,56.3 363.8,56.2 363.8,52.4 367.6,52.4 367.7,52.4 367.7,52.3 367.7,49.5 367.7,49.4 "/>
</g>
</symbol>
<symbol id="Search">
<path class="st8" d="M515,67.5h-25c-5,0-9-4-9-9v-25c0-5,4-9,9-9h25c5,0,9,4,9,9v25C524,63.5,520,67.5,515,67.5z"/>
<path class="st1" d="M506.1,54.2c-6.1,0-11-4.9-11-11s4.9-11,11-11c6.1,0,11,4.9,11,11S512.1,54.2,506.1,54.2z M506.1,35.1
c-4.5,0-8.1,3.7-8.1,8.1s3.7,8.1,8.1,8.1c4.5,0,8.1-3.7,8.1-8.1S510.6,35.1,506.1,35.1z"/>
<path class="st1" d="M489.8,60.3c-0.4,0-0.7-0.1-1-0.4c-0.6-0.6-0.6-1.5,0-2l8.6-8.6c0.6-0.6,1.5-0.6,2,0c0.6,0.6,0.6,1.5,0,2
l-8.6,8.6C490.5,60.2,490.1,60.3,489.8,60.3z"/>
</symbol>
</svg>
The icons are loaded into your application, but they will not be
visible until called by the <use> command
Then by ID icon you call it in the right placeHTML page
<svg viewBox="0 0 676 289">
<use xlink:href="icons.svg#instagram" />
</svg>
Below is a sample code for inline adding sprite icons:
<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<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 676 289" style="enable-background:new 0 0 676 289;" xml:space="preserve">
<style type="text/css">
.st0{fill:#EA3B58;}
.st1{fill:#FFFFFF;}
.st2{fill:#4C76BE;}
.st3{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
.st4{fill:#F99400;}
.st5{fill:#4C75A3;}
.st6{fill:#00C7FF;}
.st7{fill:#FC5345;}
.st8{fill:#71C644;}
</style>
<symbol id="instagram">
<circle class="st0" cx="68.8" cy="52" r="29.1"/>
<g>
<path class="st1" d="M82.6,44.5c-0.2-1.9-0.9-3.5-2.3-4.8c-1.4-1.4-3.2-2-5.2-2.1c-3.3-0.2-11.2-0.3-13.9,0.2
c-3.2,0.5-5.2,2.4-6.1,5.5C54.5,45.6,54.6,56.6,55,59c0.5,3.2,2.4,5.3,5.7,6.1c2.2,0.6,13.1,0.5,15.6,0.1c3.2-0.5,5.3-2.4,6.2-5.6
C83.1,57.2,82.8,46.7,82.6,44.5z M80,58.6c-0.4,2.5-2,4-4.5,4.3c-2.3,0.2-12.4,0.4-14.5-0.2c-2-0.6-3.2-1.9-3.5-4
c-0.3-1.9-0.4-11.6,0-14.2c0.4-2.4,2-4,4.5-4.2c2.5-0.3,11.5-0.3,13.9,0.1c2.5,0.4,4,2,4.2,4.5C80.3,47,80.4,56.1,80,58.6z
M68.8,44.3c-4,0-7.2,3.2-7.2,7.2c0,4,3.2,7.2,7.2,7.2c4,0,7.2-3.2,7.2-7.2C76,47.5,72.8,44.3,68.8,44.3z M68.7,56.2
c-2.5,0-4.6-2.1-4.6-4.7c0-2.6,2.1-4.7,4.7-4.7c2.6,0,4.7,2.1,4.7,4.7C73.4,54.1,71.3,56.2,68.7,56.2z M78,44
c0,0.9-0.8,1.7-1.7,1.7s-1.7-0.7-1.7-1.7c0-1,0.8-1.7,1.7-1.7C77.2,42.3,78,43.1,78,44z"/>
</g>
</symbol>
<symbol id="facebook">
<circle class="st2" cx="139" cy="52" r="29.1"/>
<path class="st3" d="M143.8,41.1c1,0,1.9,0,2.9,0c0.1,0,0.2,0,0.4,0v-5c-0.5-0.1-1.1-0.1-1.6-0.2c-1,0-2-0.1-3-0.1
c-1.5,0-3,0.4-4.2,1.3c-1.4,1-2.2,2.5-2.5,4.2c-0.1,0.7-0.2,1.4-0.2,2.2c0,1.1,0,2.3,0,3.4v0.4h-4.8V53h4.8v14.1h5.9V53h4.8
c0.2-1.9,0.5-3.7,0.7-5.7c-0.4,0-0.7,0-1.1,0c-1.4,0-4.5,0-4.5,0s0-2.8,0-4C141.5,41.7,142.5,41.2,143.8,41.1z"/>
</symbol>
<symbol id="ok">
<circle class="st4" cx="209.2" cy="52" r="29.1"/>
<g>
<path class="st1" d="M212.7,59.3c0.7,0.6,1.3,1.1,1.8,1.7c1,0.9,1.9,1.9,2.8,2.9c0.9,1.1,0.8,2.5-0.2,3.4c-1,0.9-2.4,1-3.5,0
c-1.3-1.3-2.6-2.6-3.9-3.9c-0.2-0.2-0.3-0.5-0.5-0.7c-1,0.9-1.7,1.7-2.5,2.4c-0.7,0.7-1.4,1.4-2.1,2c-1.1,1.1-2.6,1.1-3.6,0.1
c-1.1-1-1.1-2.5,0-3.7c1.3-1.3,2.6-2.6,3.9-4c0.1-0.1,0.2-0.3,0.3-0.3c-1.5-0.7-3-1.3-4.4-2.1c-1-0.6-1.4-1.7-1.1-2.8
c0.5-1.7,2.1-2.3,3.7-1.6c1.1,0.5,2.2,1.1,3.3,1.3c2.6,0.7,5,0.2,7.4-1c0.5-0.2,1-0.5,1.5-0.6c1.2-0.2,2.3,0.5,2.7,1.6
c0.4,1.1,0.1,2.4-1,3c-1.2,0.7-2.5,1.2-3.8,1.8C213.4,59.1,213.2,59.2,212.7,59.3z"/>
<path class="st1" d="M200.9,44.2c-0.2-3.9,3.1-8.3,8.3-8.3c5.2,0,8.5,4.5,8.4,8.5c-0.1,4.6-3.8,8.3-8.4,8.3
C203.7,52.5,200.6,47.9,200.9,44.2z M209.1,47.5c1.9,0,3.4-1.4,3.4-3.3c0-1.8-1.5-3.2-3.3-3.2c-1.9,0-3.3,1.4-3.3,3.2
C205.9,46,207.4,47.5,209.1,47.5z"/>
</g>
</symbol >
<symbol id="vk">
<circle class="st5" cx="279.4" cy="52" r="29.1"/>
<g>
<path class="st1" d="M281.5,47.6c0,1.1,0,2.1,0,3.2c0,0.3,0.1,0.6,0.3,0.8c0.3,0.5,0.7,0.5,1.1,0.2c0.6-0.5,1.1-1.1,1.5-1.7
c1.1-1.6,2-3.4,2.8-5.2c0,0,0-0.1,0.1-0.1c0.3-0.7,0.5-0.8,1.2-0.8c1.7,0,3.4,0,5.1,0c0.3,0,0.6,0,0.8,0.1
c0.4,0.1,0.6,0.4,0.5,0.8c-0.1,0.5-0.3,1-0.5,1.4c-0.8,1.5-1.8,2.8-2.8,4.1c-0.5,0.7-1.1,1.4-1.6,2.1c-0.5,0.8-0.5,1.3,0.2,2
c0.9,0.9,1.8,1.7,2.6,2.6c0.6,0.7,1.2,1.5,1.8,2.2c0.2,0.2,0.3,0.5,0.3,0.8c0.1,0.6-0.1,0.9-0.7,1.1c-0.3,0.1-0.6,0.1-0.9,0.1
c-1.5,0-3,0.1-4.4,0.1c-0.8,0-1.5-0.3-2-0.8c-0.8-0.7-1.4-1.5-2.2-2.2c-0.3-0.3-0.6-0.6-0.9-0.9c-0.1-0.1-0.2-0.2-0.4-0.3
c-0.4-0.2-0.7-0.2-1,0.1c-0.4,0.4-0.6,0.9-0.7,1.5c-0.1,0.5-0.1,0.9-0.1,1.4c-0.1,0.6-0.4,1-1,1c-2.1,0.1-4.2,0.2-6.2-0.8
c-1.8-0.9-3.4-2.1-4.7-3.7c-2.8-3.4-4.9-7.2-6.6-11.2c-0.1-0.2-0.2-0.4-0.3-0.7c-0.1-0.5,0.1-0.8,0.5-0.9c0.2,0,0.4-0.1,0.7-0.1
c1.4,0,2.8,0,4.2,0c0.7,0,1.2,0.3,1.5,1c0.7,1.8,1.6,3.4,2.6,5.1c0.4,0.7,0.8,1.3,1.5,1.8c0.3,0.2,0.6,0.4,1,0.3
c0.1,0,0.2-0.1,0.3-0.2c0.3-0.4,0.4-0.9,0.4-1.4c0.2-1.2,0.2-2.4,0.1-3.6c0-0.4-0.1-0.8-0.2-1.2c-0.2-0.7-0.7-1-1.3-1.2
c-0.1,0-0.3-0.1-0.4-0.2c0.1-0.1,0.2-0.3,0.3-0.4c0.3-0.4,0.7-0.5,1.2-0.6c1.7-0.3,3.4-0.3,5.1-0.1c0.2,0,0.3,0,0.5,0.1
c0.8,0.2,1,0.4,1.1,1.3c0.1,0.7,0,1.4,0,2.1C281.5,47,281.5,47.3,281.5,47.6C281.5,47.6,281.5,47.6,281.5,47.6z"/>
</g>
</symbol>
<symbol id="twitter">
<circle class="st6" cx="419.9" cy="52" r="29.1"/>
<path class="st3" d="M413.7,59.9c-3.4-0.1-5.5-2.5-6-4.5c0.9,0.2,1.9,0.1,2.8-0.1c0,0,0,0,0.1,0c-1.8-0.4-3.2-1.4-4.2-3
c-0.6-1-1-2.2-0.9-3.4c0.9,0.5,1.9,0.8,2.9,0.8c-1.4-1-2.3-2.3-2.7-3.9c-0.4-1.6-0.1-3.2,0.7-4.7c3.5,4.1,7.9,6.4,13.3,6.8
c0-0.3-0.1-0.5-0.1-0.7c-0.2-1.5,0.1-2.9,0.9-4.2c1-1.6,2.5-2.6,4.4-2.9c2.2-0.4,4.1,0.3,5.7,1.8c0.1,0.1,0.2,0.1,0.3,0.1
c1.3-0.3,2.6-0.8,3.8-1.4c0,0,0.1,0,0.1,0c0,0,0,0,0,0c-0.5,1.5-1.4,2.7-2.8,3.5c1.3-0.1,2.4-0.5,3.6-1c0,0,0,0,0,0
c-0.2,0.3-0.5,0.7-0.7,1c-0.7,0.8-1.5,1.6-2.4,2.2c-0.1,0.1-0.1,0.1-0.1,0.2c0,1,0,1.9-0.1,2.9c-0.2,2-0.8,3.9-1.7,5.8
c-0.9,1.9-2,3.6-3.5,5.1c-2.5,2.5-5.4,4.2-8.9,5c-1.2,0.3-2.4,0.4-3.6,0.4c-3.7,0.1-7.2-0.8-10.4-2.8c0,0-0.1-0.1-0.2-0.1
c2.3,0.2,4.4,0,6.5-0.9C411.7,61.2,412.7,60.7,413.7,59.9z"/>
</symbol>
<symbol id="GooglePlus">
<circle class="st7" cx="349.7" cy="52" r="29.1"/>
<g>
<path class="st1" d="M343.8,49.3c0,0.1,0,0.1,0,0.2c0,1.3,0,4.3,0,4.3s5.6,0,5.9,0c0,0.4-0.5,2.2-2.2,3.3c-1,0.7-2.1,1-3.2,1
c-0.8,0.1-1.6,0-2.4-0.3c-2.5-0.8-4.3-3-4.6-5.7c-0.1-0.7,0-1.3,0.1-2c0.7-3.2,3.8-5.6,7.3-5.1c1.5,0.2,2.4,0.9,3.2,1.6
c1.1-1.1,2.1-2.1,3.2-3.2c-0.3-0.2-0.9-0.8-2-1.4c-1.6-0.9-3.4-1.4-5.2-1.4c-0.4,0-0.7,0-1.1,0c-0.6,0-1.2,0.1-1.8,0.3
c-2.4,0.6-4.4,1.9-5.9,3.8c-1.5,1.8-2.3,4-2.4,6.3c-0.1,1,0,2,0.2,3c0.6,2.7,2.1,4.9,4.3,6.6c1.8,1.3,3.7,2,5.9,2.1
c1.2,0.1,2.4,0,3.6-0.4c2.2-0.6,4.1-1.7,5.4-3.6c2-2.7,2.5-6.1,1.9-9.3C350.7,49.3,347.3,49.3,343.8,49.3z"/>
<polygon class="st1" points="367.6,49.4 363.8,49.4 363.8,45.7 363.8,45.6 363.7,45.6 360.9,45.6 360.8,45.6 360.8,45.7
360.8,49.4 357,49.4 356.9,49.4 356.9,49.5 356.9,52.3 356.9,52.4 357,52.4 360.8,52.4 360.8,56.2 360.8,56.3 360.9,56.3
363.7,56.3 363.8,56.3 363.8,56.2 363.8,52.4 367.6,52.4 367.7,52.4 367.7,52.3 367.7,49.5 367.7,49.4 "/>
</g>
</symbol>
<symbol id="Search">
<path class="st8" d="M515,67.5h-25c-5,0-9-4-9-9v-25c0-5,4-9,9-9h25c5,0,9,4,9,9v25C524,63.5,520,67.5,515,67.5z"/>
<path class="st1" d="M506.1,54.2c-6.1,0-11-4.9-11-11s4.9-11,11-11c6.1,0,11,4.9,11,11S512.1,54.2,506.1,54.2z M506.1,35.1
c-4.5,0-8.1,3.7-8.1,8.1s3.7,8.1,8.1,8.1c4.5,0,8.1-3.7,8.1-8.1S510.6,35.1,506.1,35.1z"/>
<path class="st1" d="M489.8,60.3c-0.4,0-0.7-0.1-1-0.4c-0.6-0.6-0.6-1.5,0-2l8.6-8.6c0.6-0.6,1.5-0.6,2,0c0.6,0.6,0.6,1.5,0,2
l-8.6,8.6C490.5,60.2,490.1,60.3,489.8,60.3z"/>
</symbol>
<svg viewBox="0 0 676 289">
<use xlink:href="#instagram" />
<use xlink:href="#facebook" />
<use xlink:href="#ok" />
<use xlink:href="#vk" />
<use xlink:href="#GooglePlus" />
<use xlink:href="#twitter" />
<use xlink:href="#Search" />
</svg>
</svg>
SVG rendering in Safari and IE
I have a lot of trouble with an svg that is made from an Illustrator. Here is the code that the Illustrator gave me. <svg version="1.1" class="svg active" id="vertical_lines_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 216.4 64.4" style="enable-background:new 0 0 216.4 64.4;" xml:space="preserve"> <use xlink:href="#I" id="svgCanvas"/> <pattern x="92.6" y="18.1" width="28.3" height="28.3" patternUnits="userSpaceOnUse" id="New_Pattern" viewBox="0 -28.3 28.3 28.3" style="overflow:visible;"> <g id="XMLID_484_"> <polygon id="XMLID_507_" class="st0" points="0,-28.3 28.3,-28.3 28.3,0 0,0 "/> <polygon id="XMLID_506_" class="st4" points="7.1,0 0,0 0,-28.3 7.1,-28.3 "/> <polygon id="XMLID_505_" class="st1" points="14.2,0 7.1,0 7.1,-28.3 14.2,-28.3 "/> <polygon id="XMLID_504_" class="st4" points="21.3,0 14.2,0 14.2,-28.3 21.3,-28.3 "/> <polygon id="XMLID_503_" class="st1" points="28.3,0 21.3,0 21.3,-28.3 28.3,-28.3 "/> </g> </pattern> <g id="XMLID_131_"> <pattern id="XMLID_28" xlink:href="#New_Pattern" patternTransform="matrix(1 0 0 1 -40.8688 -2.6535)"> </pattern> <path id="XMLID_132_" class="st2" fill="url(#XMLID_28_)" d="M74.2,39.6c8.1,3.2,20.8,4.9,33.8,4.8c13,0.1,25.8-1.6,33.8-4.8c8.1,3.2,20.8,4.9,33.8,4.8 c13,0.1,25.8-1.6,33.9-4.9c-0.1-1-0.5-3.4-1-6.5c-1.1-6.8-2.8-16.9-4.1-21.7l-0.1-0.2c-2-7.6-2.9-11.1-7.5-11.1h-40.4 c-6.3,0-7.2,2.6-8.8,8.9l-0.5,2.1c-1.3,5.1-3.1,12.3-4.6,21.9c-0.3,1.9-0.6,4-0.8,6.1c-0.2-1.2-0.5-3.4-1-6 c-1.1-6.8-2.8-16.9-4.1-21.7l-0.1-0.2c-2-7.6-2.9-11.1-7.5-11.1H88.8c-6.3,0-7.2,2.6-8.8,8.9l-0.5,2.1c-1.3,5.1-3.1,12.3-4.6,21.9 c-0.3,1.9-0.6,4-0.8,6.1c-0.2-1.2-0.5-3.4-1-6c-1.1-6.8-2.8-16.9-4.1-21.7l-0.1-0.2C67,3.5,66.1,0,61.5,0H21.2 C14.9,0,14,2.6,12.4,9l-0.5,2.1c-1.3,5.1-3.1,12.3-4.6,21.9C7,35,6.7,37.2,6.5,39.5c8.1,3.3,20.9,4.9,33.9,4.9 C53.4,44.5,66.1,42.8,74.2,39.6z"/> <pattern id="XMLID_29" xlink:href="#New_Pattern" patternTransform="matrix(1 0 0 1 -40.8688 -2.6535)"> </pattern> <path id="XMLID_322_" class="st3" fill="url(#XMLID_29_)" d="M211,45.6c-0.3,0-0.6-0.1-0.8-0.1c-10.6,4.9-39.7,7.1-63.5,1.5c-1.6-0.4-3.2-0.8-4.7-1.2 c-1.6,0.7-3.5,1.3-5.7,1.8C122.9,50.9,99.1,51.7,79,47c-1.6-0.4-3.2-0.8-4.7-1.2c-1.6,0.7-3.5,1.3-5.7,1.8 C54,51.2,26.9,51.9,5.9,45.5c-0.3,0-0.6,0-0.8,0.1c-2.7,0.4-6.2,3.2-4.6,4.3c3.4,2.2,8.7,3.9,15,5.1v9.3h49.9v-9.3 c3.3-0.6,6.3-1.4,8.9-2.3c2.6,0.9,5.6,1.7,8.9,2.3v9.3H133v-9.3c3.3-0.6,6.3-1.4,8.9-2.3c2.6,0.9,5.6,1.7,8.9,2.3v9.3h49.9v-9.3 c6.3-1.2,11.6-2.9,15-5.1C217.2,48.8,213.8,46,211,45.6z"/> </g> </svg><!--end vertical_lines_svg--> I have to change the colors of the patterns .st4 and .st1 with jQuery, everything is great in FF and Chrome, but nothing renders on IE and Safari. I tried everything and did not manage to fix it. Any ideas why this is happening and how can I fix it?
Ok, I found the problem you can't have negative values to the viewBox attribute in tag. This will make the svg to disappear in IE
With Jekyll, links inside SVG graphics aren't working
I have an SVG graphic in a Jekyll project with code like this: ``` <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 451.5 100" enable-background="new 0 0 451.5 100" xml:space="preserve"> <a xlink:href="http://google.com"> <g id="step1_1_"> <rect x="19" y="15.7" fill="whitesmoke" stroke="orange" stroke-miterlimit="10" width="110.6" height="69.1"/> <text id="step1" transform="matrix(1 0 0 1 36.1851 39.8042)"><tspan x="0" y="0" font-family="'MyriadPro-Regular'" font-size="12">Configure the </tspan><tspan x="0" y="14.4" font-family="'MyriadPro-Regular'" font-size="12">widget</tspan></text> </g> </a> <a xlink:href="http://nytimes.com"> <g id="step2_1_"> <rect x="170.2" y="15.7" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" width="110.6" height="69.1"/> <text id="step2" transform="matrix(1 0 0 1 190.2962 39.8042)"><tspan x="0" y="0" font-family="'MyriadPro-Regular'" font-size="12">Configure the </tspan><tspan x="0" y="14.4" font-family="'MyriadPro-Regular'" font-size="12">gizmo</tspan></text> </g> </a> <a xlink:href="http://yahoo.com"> <g id="step3_1_"> <rect x="321.2" y="15.7" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" width="110.6" height="69.1"/> <text id="step3" transform="matrix(1 0 0 1 342.4126 38.7301)"><tspan x="0" y="0" font-family="'MyriadPro-Regular'" font-size="12">Copy the scripts</tspan></text> </g> </a> <g id="arrows"> <g> <g> <line fill="none" stroke="#000000" stroke-miterlimit="10" x1="134" y1="46.5" x2="156" y2="46.5"/> <g> <path d="M162,46.5c-2.8,1.1-6.4,2.9-8.5,4.8l1.7-4.8l-1.7-4.8C155.6,43.6,159.2,45.4,162,46.5z"/> </g> </g> </g> <g> <g> <line fill="none" stroke="#000000" stroke-miterlimit="10" x1="287" y1="48.5" x2="309" y2="48.5"/> <g> <path d="M315,48.5c-2.8,1.1-6.4,2.9-8.5,4.8l1.7-4.8l-1.7-4.8C308.6,45.6,312.2,47.4,315,48.5z"/> </g> </g> </g> </g> </svg> ``` This image is just three rectangular shapes that are formatted with links using the a tag. When I view the image in the browser by itself, the links work. However, when I view the image inside a Jekyll site, the links no longer work. Any ideas why?
If you embed your svg as an image (img) you have no control over it (external css and js) and links are not clickable. Options are :
inline svg
{% include_relative workflow.svg %}
using the object tag
<object data="/workflow.svg" type="image/svg+xml" class="mailicon" />
</object>
More info on https://css-tricks.com/using-svg/