Why my image positioning in svg has an offset of 22? - image

I try to position an image inside a svg graphics to the left border, but with x=0 the image has a offset of 22. When x=-22 it fits, but why?
This is my svg:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="400px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<image x="0" y="50" width="200px" height="100px" href="data:image/png;base64,__base64data__" />
</svg>
And here is the result:
When I reduce x to -22 it looks fine, but it should be 0, shouldn't it?
<image x="-22" y="50" ...
How can I fix it? Where does the margin comes from?
Thanks a lot.

Related

Image inside SVG shape path renders as black in Safari

I have a really odd Safari bug. I have an image inside an SVG shape path, here's the code:
<svg viewBox="0 0 367 367" height="367" width="367" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<pattern id="bias" height="100%" width="100%" patternContentUnits="objectBoundingBox" viewBox="0 0 1 1" preserveAspectRatio="xMidYMid slice">
<image height="1" width="1" preserveAspectRatio="xMidYMid slice" xlink:href="https://upload.wikimedia.org/wikipedia/commons/c/cb/ADAC-Zentrale%2C_Munich%2C_March_2017-01.jpg"/>
</pattern>
</defs>
<path d="M0,183.5 L0,0 L183.5,0 C284.844252,0 367,82.1557484 367,183.5 C367,284.844252 284.844252,367 183.5,367 C82.1557484,367 0,284.844252 0,183.5 Z" fill="url(#bias)"></path>
</svg>
The image renders fine on the home page but the same code on all other pages renders the shape as black and no image, although in the inspector I can see the image is loaded. All other browsers it's fine.
The left shape is an example of it rendering correctly on the home page and the right is how it renders on every other page. Same template, same code.
Any ideas? Been pulling my hair out for hours, thanks.

Turns out it was a <base> tag in the head messing with the relative url.
Similar issue to this issue SVG Gradient turns black when there is a BASE tag in HTML page?
Thanks

SVG: include image with color attribute

I'm trying to load an SVG image into an other SVG image. This works pretty well. However, I can't seem to change the color of the loaded/embedded image from the main file.
In the w3 specs (https://www.w3.org/TR/SVG/struct.html#ImageElement) it says I could use the presentation attribute color.
Here is what I have, the main svg is generated by PHP (so I can easily use dynamic colors & dynamic included images):
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="75" height="105" viewBox="0 0 229 323" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<defs></defs>
<g id="Welcome" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="markers_version_1" sketch:type="MSLayerGroup" transform="translate(-290.000000, -669.000000)" fill="#ff9900">
<g id="video_marker" transform="translate(290.000000, 669.000000)" sketch:type="MSShapeGroup">
<path d="M112.666748,321.132938 C113.679225,322.44023 115.323763,322.440513 116.333252,321.132938 C116.333252,321.132938 229,177.318681 229,114.230769 C229,51.1428574 177.736604,0 114.5,0 C51.2633961,0 0,51.1428574 0,114.230769 C0,177.318681 112.666748,321.132938 112.666748,321.132938 Z" id="Oval-video"></path>
</g>
</g>
<image xlink:href="test.svg" x="50" y="40" height="120px" width="120px" color="#ff9900" />
</g>
</svg>
(test.svg, simple svg for testing :)
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 229 323" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<path d="M205,110.25C205,89.691 188.309,73 167.75,73L80.25,73C59.691,73 43,89.691 43,110.25L43,184.75C43,205.309 59.691,222 80.25,222L167.75,222C188.309,222 205,205.309 205,184.75L205,110.25Z" />
</svg>
I've searched on SO and the rest of the internet, and see some other ways to add color to the image element, like style="fill:#ff9900" or style="color:#ff9900" but they don't seem to work.
Hoping someone can point me into the right direction.

Scale an entire SVG image to a new size without having to update the sizes of all the objects in it

I have an SVG image that specifies a specific height and width. All the objects in the SVG image are created to use this width and height. Something like this:
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="600">
<g>
<circle cx="300" cy="300" r="295" fill="red" stroke="black" stroke-width="10"/>
</g>
</svg>
Which makes a 600 pixel red circle with a black border:
How do I scale this SVG image (to say 200x200) without having to go through and update all the objects (in this case just the red circle) contained within it?

To resize an SVG image you need to introduce a viewBox attribute that contains the the original size pixels. Then you can change the width and height to whatever you want.
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200" viewBox="0 0 600 600">
<g>
<circle cx="300" cy="300" r="295" fill="red" stroke="black" stroke-width="10"/>
</g>
</svg>
That way the coordinate system to which the image is drawn is still the original 600x600, but the image displays scaled to 200x200.

Alternate method: assuming that all these SVG images are individual files, you can use either <object>, <embed> or <img> tag to reference this SVG file, then set width=200 and height=200 to rescale it.
Eg: <img src="path/to/somefile.svg" width="200" height="200"...../>

svg clip image and show stroke

Hi I am new on this site so please forgive me if i am not clear about what i am trying to do
My Question is:-
I am using HTML5 and SVG to clip the image so that only the part of the image that is inside the clipping/polygon shape is displayed while any part outside the polygon shape is invisible/clipped
Also I wish to add stroke width and color to the polygon shape
The SVG code that i am using:-
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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="455px" height="435px" viewPort="0 0 455 435" enable-background="new 0 0 455 435" xml:space="preserve">
<g>
<g>
<clipPath ID="SVGID_1_">
<path fill="none" stroke="#140063" stroke-width="3" stroke-miterlimit="10" d="M58.381,13.64
c0,0-39.011-19.932-50.819-5.104c-11.81,14.831,0.924,33.405,7.394,56.408c6.466,22.996,12.383,53.957,12.194,64.569
c-0.183,10.619,2.373,88.462,5.252,93.771c2.882,5.303-4.146,83.151-6.172,99.068c-2.035,15.925-18.668,83.151-18.668,83.151
S-7.896,443.4,40.954,428.874c48.844-14.523,188.373-18.06,206.847-18.949c18.48-0.885,160.776,16.67,167.244,19.836
c6.471,3.164,44.354,12.017,36.966-18.065c-7.396-30.072-22.252-97.301-22.252-97.301s-4.192-98.188-3.446-107.035
c0.748-8.846,6.144-60.148,3.446-70.763c-2.698-10.614,16.704-95.534,19.478-103.495c2.774-7.96,6.825-35.329-33.088-26.511
c-39.905,8.819-131.384,17.665-146.172,17.665C255.194,24.252,86.272,23.356,58.381,13.64z"/>
</clipPath>
</g>
</g>
<a xlink:href="#">
<image clip-path="url(#SVGID_1_)" height="500" width="667" style="border-color:black;border-width:5;" xlink:href="img.jpg" />
</a>
</svg>
The above mentioned code works fine, it display's an image that has a polygon shape, only the image part falling inside the shape is displayed whereas any part falling outside the shape is hidden
But somehow I tried various things but still i am not able to display stroke/border.
My question is how to display the border/stroke on a polygon shape that is used to clip an image
Thanks in advance

At first, please write ID in small letters in order to make the clip path work: <clipPath id="SVGID_1_">
Second, just duplicate your path in order to use is as regular shape.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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="455px" height="435px" viewPort="0 0 455 435" enable-background="new 0 0 455 435" xml:space="preserve">
<g>
<g>
<clipPath id="SVGID_1_">
<path fill="none" stroke="#140063" stroke-width="3" stroke-miterlimit="10" d="M58.381,13.64
c0,0-39.011-19.932-50.819-5.104c-11.81,14.831,0.924,33.405,7.394,56.408c6.466,22.996,12.383,53.957,12.194,64.569
c-0.183,10.619,2.373,88.462,5.252,93.771c2.882,5.303-4.146,83.151-6.172,99.068c-2.035,15.925-18.668,83.151-18.668,83.151
S-7.896,443.4,40.954,428.874c48.844-14.523,188.373-18.06,206.847-18.949c18.48-0.885,160.776,16.67,167.244,19.836
c6.471,3.164,44.354,12.017,36.966-18.065c-7.396-30.072-22.252-97.301-22.252-97.301s-4.192-98.188-3.446-107.035
c0.748-8.846,6.144-60.148,3.446-70.763c-2.698-10.614,16.704-95.534,19.478-103.495c2.774-7.96,6.825-35.329-33.088-26.511
c-39.905,8.819-131.384,17.665-146.172,17.665C255.194,24.252,86.272,23.356,58.381,13.64z"/>
</clipPath>
<path fill="none" stroke="#140063" stroke-width="3" stroke-miterlimit="10" d="M58.381,13.64
c0,0-39.011-19.932-50.819-5.104c-11.81,14.831,0.924,33.405,7.394,56.408c6.466,22.996,12.383,53.957,12.194,64.569
c-0.183,10.619,2.373,88.462,5.252,93.771c2.882,5.303-4.146,83.151-6.172,99.068c-2.035,15.925-18.668,83.151-18.668,83.151
S-7.896,443.4,40.954,428.874c48.844-14.523,188.373-18.06,206.847-18.949c18.48-0.885,160.776,16.67,167.244,19.836
c6.471,3.164,44.354,12.017,36.966-18.065c-7.396-30.072-22.252-97.301-22.252-97.301s-4.192-98.188-3.446-107.035
c0.748-8.846,6.144-60.148,3.446-70.763c-2.698-10.614,16.704-95.534,19.478-103.495c2.774-7.96,6.825-35.329-33.088-26.511
c-39.905,8.819-131.384,17.665-146.172,17.665C255.194,24.252,86.272,23.356,58.381,13.64z"/>
</g>
</g>
<a xlink:href="#">
<image clip-path="url(#SVGID_1_)" height="500" width="667" style="border-color:black;border-width:5px;" xlink:href="img.jpg" />
</a>
</svg>
Alternatively, you can define you path as a shape and just refer to its name afterwards:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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="455px" height="435px" viewPort="0 0 455 435" enable-background="new 0 0 455 435" xml:space="preserve">
<defs>
<path id="myPath" fill="none" stroke="#140063" stroke-width="3" stroke-miterlimit="10" d="M58.381,13.64
c0,0-39.011-19.932-50.819-5.104c-11.81,14.831,0.924,33.405,7.394,56.408c6.466,22.996,12.383,53.957,12.194,64.569
c-0.183,10.619,2.373,88.462,5.252,93.771c2.882,5.303-4.146,83.151-6.172,99.068c-2.035,15.925-18.668,83.151-18.668,83.151
S-7.896,443.4,40.954,428.874c48.844-14.523,188.373-18.06,206.847-18.949c18.48-0.885,160.776,16.67,167.244,19.836
c6.471,3.164,44.354,12.017,36.966-18.065c-7.396-30.072-22.252-97.301-22.252-97.301s-4.192-98.188-3.446-107.035
c0.748-8.846,6.144-60.148,3.446-70.763c-2.698-10.614,16.704-95.534,19.478-103.495c2.774-7.96,6.825-35.329-33.088-26.511
c-39.905,8.819-131.384,17.665-146.172,17.665C255.194,24.252,86.272,23.356,58.381,13.64z"/>
</defs>
<g>
<g>
<clipPath id="SVGID_1_">
<use xlink:href="#myPath" x="0" y="0"/>
</clipPath>
<use xlink:href="#myPath" x="0" y="0"/>
</g>
</g>
<a xlink:href="#">
<image clip-path="url(#SVGID_1_)" height="500" width="667" style="border-color:black;border-width:5px;" xlink:href="img.jpg" />
</a>
</svg>
Check out this doc.

Here you are using an image from within the SVG but if suppose you are using clip path on the image in your html code, you won't be able to give it border this way.
To achieve that you can apply the clip-path to the container div of the image too and then give it a background and border of the same color.

Switching between 2 values in an SVG animate element

I want to switch between exactly two values in an SVG animate element. I tried it this way:
<?xml version="1.0" encoding="utf-8"?>
<!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" width="150" height="150" viewBox="0 0 150 150">
<rect x="10" y="10" width="100" height="100" fill="blue" stroke="red">
<animate attributeName="fill-opacity" values="0; 1" dur="1s" repeatCount="indefinite"/>
</rect>
</svg>
I wanted have the fill-opacity switching between the values 0 and 1. But what it does is fading from 0 to 1. I want it to stay on 0 for 1s, then stay on 1 for 1s, back to 0 for 1s and so on.
How do I do that? I tried nearly all possible attribute combinations but didn't manage it.

You want calcMode="discrete" on the animate element the default is linear.

Resources