So i'm busy with SVG and i need a couple of images in my project. So you have the element . You can also give the height and width. The given picture doesn't resize to the height and width you give to the image element.
I have this code:
<g class="node image" transform="translate(0,129.652067739873)" type="ad">
<image href="content/image/image.png" height="30px" width="100px" y="41.94444444444444" x="0">
<title>google.nl</title>
</image>
<text y="56.625" x="106" dy=".35em" text-anchor="start">google.nl</text>
</g>
Now i want that the image.png cover the whole image element. Like background-size:cover; But that doesn't work, and i can't find any attribute who can do this. Is there a way to do this in a correct way?
Try setting preserveAspectRatio="none" for the <image> element. Also, if you want it to cover all of the svg, set width and height to '100%'
<image href="content/image/image.png" height="100%" width="100%" y="41.94444444444444" x="0" preserveAspectRatio="none">
Related
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
I saw many questions about NS_ERROR_FAILURE when calling getBBox in Firefox, and as I understand, element must be visible before calling this:
Error : NS_ERROR_FAILURE in firefox while use getBBox()
But in my case, element is part of <mask>, and it seems that Firefox does not recognize it as visible element at all.
Markup is following:
<svg>
<mask id="mask">
<text
dominantBaseline="central"
textAnchor="middle"
x="50%" y="50%"
fill="white"
>
...
</text>
</mask>
<image mask="url(#mask)" xlink:href="..." width="100%" height="100%" />
</svg>
and I'm using getBBox on <text> to use it's dimensions as viewBox params (i.e., to stretch text at all available space inside svg).
With this, inspector shows that <text> has dimensions 0x0, like if it was invisible or not present in DOM.
What can I do to make it work?
I have produced a tree diagram using svg as rectangular nodes in D3js. Here is the bl.ock for it:
http://bl.ocks.org/Coola85/2450007804d9508866616640ac1272b8/fea7a37158edf9accd749a6fa3399800bea9bbad
The output in the browser looks like this and the aim is to be able to save this as an SVG:
I use SVG Crowbar (https://nytimes.github.io/svg-crowbar/) to save the svg using Google Chrome.
When I try to open the svg in InkScape it pixelates the rectangles and it appears like this.
Adobe Illustrator completely fails to open the rectangles at all stating that a plugin is required. I searched everywhere but no such plugin exists.
I would like to find a way so that the images (in this case rectangles) still appear sharp and are vector paths/shapes.
The XML editor for inkscape shows that it is using the xlink:href for the svg file as shown below.
Here is the code for the Main SVG file output:
<?xml version="1.0" standalone="no"?>
<svg width="960" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="font-family:serif;height:500px;perspective-origin:480px 250px;transform-origin:480px 250px;width:960px;-moz-text-size-adjust:auto;">
<g transform="translate(120,20)" style="font-family:serif;height:auto;overflow:visible;overflow-x:visible;overflow-y:visible;perspective-origin:480px 250px;transform-origin:0px 0px;width:auto;-moz-text-size-adjust:auto;">
<path class="link" style="font-family:serif;height:auto;overflow:visible;overflow-x:visible;overflow-y:visible;perspective-origin:480px 250px;transform-origin:0px 0px;width:auto;-moz-text-size-adjust:auto;fill:none;stroke:rgb(255, 0, 0);stroke-width:2px;" d="M0,230C90,230 90,115 180,115" />
<path class="link" style="font-family:serif;height:auto;overflow:visible;overflow-x:visible;overflow-y:visible;perspective-origin:480px 250px;transform-origin:0px 0px;width:auto;-moz-text-size-adjust:auto;fill:none;stroke:rgb(0, 128, 0);stroke-width:2px;" d="M0,230C90,230 90,345 180,345" />
<g class="node" transform="translate(180,345)" style="font-family:serif;height:auto;overflow:visible;overflow-x:visible;overflow-y:visible;perspective-origin:480px 250px;transform-origin:0px 0px;width:auto;-moz-text-size-adjust:auto;">
<image xlink:href="rect2.svg" x="-12px" y="-12px" width="24px" height="24px" style="font-family:serif;height:auto;perspective-origin:480px 250px;transform-origin:0px 0px;width:auto;-moz-text-size-adjust:auto;" />
<text x="15" dy=".35em" text-anchor="start" style="font-family:sans-serif;font-size:12px;height:auto;line-height:14.4px;overflow:visible;overflow-x:visible;overflow-y:visible;perspective-origin:480px 250px;transform-origin:0px 0px;width:auto;-moz-text-size-adjust:auto;">Level 2: B</text>
</g>
<g class="node" transform="translate(180,115)" style="font-family:serif;height:auto;overflow:visible;overflow-x:visible;overflow-y:visible;perspective-origin:480px 250px;transform-origin:0px 0px;width:auto;-moz-text-size-adjust:auto;">
<image xlink:href="rect2.svg" x="-12px" y="-12px" width="24px" height="24px" style="font-family:serif;height:auto;perspective-origin:480px 250px;transform-origin:0px 0px;width:auto;-moz-text-size-adjust:auto;" />
<text x="15" dy=".35em" text-anchor="start" style="font-family:sans-serif;font-size:12px;height:auto;line-height:14.4px;overflow:visible;overflow-x:visible;overflow-y:visible;perspective-origin:480px 250px;transform-origin:0px 0px;width:auto;-moz-text-size-adjust:auto;">Level 2: A</text>
</g>
<g class="node" transform="translate(0,230)" style="font-family:serif;height:auto;overflow:visible;overflow-x:visible;overflow-y:visible;perspective-origin:480px 250px;transform-origin:0px 0px;width:auto;-moz-text-size-adjust:auto;">
<image xlink:href="rect.svg" x="-12px" y="-12px" width="24px" height="24px" style="font-family:serif;height:auto;perspective-origin:480px 250px;transform-origin:0px 0px;width:auto;-moz-text-size-adjust:auto;" />
<text x="-15" dy=".35em" text-anchor="end" style="font-family:sans-serif;font-size:12px;height:auto;line-height:14.4px;overflow:visible;overflow-x:visible;overflow-y:visible;perspective-origin:480px 250px;transform-origin:0px 0px;width:auto;-moz-text-size-adjust:auto;text-anchor:end;">Top Level</text>
</g>
</g>
</svg>
Any help is appreciated
This is to be expected in the current Inkscape version (0.92.3) and previous versions that support display of linked SVG files.
The next major version will still display embedded and linked SVG files as raster images, but it will allow you to set an import resolution, so you can make them large enough so they will appear crisp.
But this is just how it displays in Inkscape - if you plan to use the SVG file in a browser later, it doesn't matter if it looks ugly while you are editing it. It will look correct, if the browser (or whichever other program you plan to use) can display linked SVG images correctly.
If you need to export a PNG image, then you should consider importing the rectangles, maybe using clones. You can use the align+distribute dialog to swap positions of objects, this makes it easy to place them in the exact same location as they were before.
Scaling a parent DIV containing an SVG that has image over a colored rect shows hairline edges from the underlying rect.
<div style='transform: scale(0.79454)'>
<svg width="1280" height="720">
<rect fill="yellow" width="1280" height="720"/>
<image width="1280" height="720" transform='matrix(1.4,0,0,1.4,-200,-150)' xlink:href="https://storage.googleapis.com/firebase-beautifulslides.appspot.com/test/dawid-zawila-279995.jpg"/>
</svg>
</div>
In the screenshot below, there is a yellow box beneath the image. Both are the same size but you can see the yellow box "bleed" out from the edges a bit (you may to view the full image or the fiddle below to see it clearly).
This artifact happens whether or not I transform the image node and also appears when I try scaling the SVG using a viewBox instead of the parent div. It's somewhat better in Safari than in Chrome but it does still happen in certain cases.
Here's a fiddle https://jsfiddle.net/e17ea4j5/
Is there any fix to this?
What you seeing is the result of anti-aliasing. The semi-transparent pixels at the edges of the yellow rectangle are visible through the semi-transparent pixels at the edges of the image.
There isn't really any elegant solution to eliminate those issues. Especially when when you are scaling by fractions (eg. 1.4 and 0.79454).
You are left with somewhat hacky solutions like putting a black stroke around your rectangle.
<rect fill="yellow" width="1280" height="720" stroke="black" stroke-width="1"/>
body{
background: black;
margin: 0;
}
<body>
<div style='transform: scale(0.79454)'>
<svg width="1280" height="720">
<rect fill="yellow" width="1280" height="720" stroke="black" stroke-width="1"/>
<image width="1280" height="720" transform='matrix(1.4,0,0,1.4,-200,-150)' xlink:href="https://storage.googleapis.com/firebase-beautifulslides.appspot.com/test/dawid-zawila-279995.jpg"/>
</svg>
</div>
</body>
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"...../>