Why does SVG viewbox attribute only work on inline SVG? - svg
I downloaded some 16x16 SVG icons that used the viewbox attribute to scale the original code to fit into 16x16 canvas on download. Now what I am experiencing is that I can not insert the SVG from an external file anywhere as the viewbox attribute just isn't working on it. If I place the SVG code inline then it works.
Am I missing something, or is this just how it is?
Here is the code.
<?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" version="1.1" height="16" viewbox="0 0 48 48" width="16">
<path clip-rule="evenodd" d="M37,47H11c-2.209,0-4-1.791-4-4V5c0-2.209,1.791-4,4-4h18.973
c0.002,0,0.005,0,0.007,0h0.02H30c0.32,0,0.593,0.161,0.776,0.395l9.829,9.829C40.84,11.407,41,11.68,41,12l0,0v0.021
c0,0.002,0,0.003,0,0.005V43C41,45.209,39.209,47,37,47z M31,4.381V11h6.619L31,4.381z M39,13h-9c-0.553,0-1-0.448-1-1V3H11
C9.896,3,9,3.896,9,5v38c0,1.104,0.896,2,2,2h26c1.104,0,2-0.896,2-2V13z M33,39H15c-0.553,0-1-0.447-1-1c0-0.552,0.447-1,1-1h18
c0.553,0,1,0.448,1,1C34,38.553,33.553,39,33,39z M33,31H15c-0.553,0-1-0.447-1-1c0-0.552,0.447-1,1-1h18c0.553,0,1,0.448,1,1
C34,30.553,33.553,31,33,31z M33,23H15c-0.553,0-1-0.447-1-1c0-0.552,0.447-1,1-1h18c0.553,0,1,0.448,1,1C34,22.553,33.553,23,33,23 z"
fill-rule="evenodd"/>
</svg>
Note that it's viewBox not viewbox - the browser might save you sometimes, but not always.
See the following for full details:
https://jsfiddle.net/t88pLgbb/4/
Related
Is there a way to apply/bake a mask or clip to an svg, leaving you with one path?
I have a set of svgs I need to minify and I noticed that many of them have two paths when they could just use one path. They use one path for the shape and one for the color. I can manually unset the mask and then do an intersect operation on each but this is very time consuming and not scalable. This file is an example of the kind of clip I'm talking about: https://svgur.com/s/Eac <?xml version="1.0" encoding="UTF-8" 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 284 284" 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;"><clipPath id="_clip1"><circle cx="140.476" cy="140.476" r="42.52"/></clipPath><g clip-path="url(#_clip1)"><rect x="57.702" y="57.702" width="165.548" height="165.548" style="fill:#ff91a5;"/></g></svg>
What is it in SVG file?
I was looking into SVG code, and i see that first time:
<svg id="Icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 342 472"><defs><style>.cls-1{isolation:isolate;}</style></defs><title>Artboard 1</title><image id="Vector_Smart_Object" data-name="Vector Smart Object" class="cls-1" width="314" height="200" transform="translate(14 272)" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAToAAADICAYAAAB4by36AAAACXBIWXMAAAsSAAALEgHS3X78AAAcrklEQVR4Xu2dbXfjKLNFDwWS08///623Ewuo+wHhKJ6knTg6vEjstWYm3UujyBJsVwGFjKpiMPgJ0/xiHh3DZLm+jkY7+BFmiG4A1JcXiyHFATBEdxqOKrLfMkR4DoboDsYQ2j4MAR6LIbpOGUKrwxBgnwzRdcCQWtsM+bXPEF2DDLH1zRBfewzRNcAQ27EZ4qvPEF0lhtzOyZBeHYboCjHENviMIb4yDNERGXIb/IQhPR5DdDsz5DbYgyG9fRmi24EhtwGTIb3fM0T3JENuCTdditwHv7yNhoohvWcZovsBZ5DbVlzGyPvnNabNz75pwKrx9vMZxDik932G6L7B0QSXZXYTWasS24u1kWcRHk2CQ3iPGaL7giPI7XRC+ykHFOCQ3ucM0d ...
Why is it says:
xlink:href="data:image/png
If it's not png?
It's a PNG that has been encoded as a data url and embeded in a SVG file, utilizing the <image> tag. From certian details its possible to see this has been produced with Illustrator. Probably someone has placed the PNG into an artboard, choosing not to link but to embed the file, and then exported to SVG.
SVG symbol with stroke has wrong size in Illustrator
I'm generating an SVG file on a website and it's supposed to be imported in Ilustrator. I use <symbol /> element to store a shape definition and I reference it with the <use /> element on the "sheet". Users are able to set size of the shape and it's really crucial that it's exactly the same size when imported to Adobe Illustrator. It works unless I add a stroke. <?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 id="SvgjsSvg1000" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="210mm" height="297mm" viewBox="0 0 210 297" viewbox="0 0 210 297"> <defs id="SvgjsDefs1001"> <symbol id="shape_id70" preserveAspectRatio="xMinYMin meet" viewBox="0 0 27.841039657592773 12.2083101272583"> <path id="SvgjsPath1030" d="M26.4405 13.067C25.685728 11.72066 22.49458 8.90142 20.73442 7.678030000000001C22.99088 7.6388854 23.85819 7.6146637 28.738950000000003 7.456081C26.298620000000003 6.628644 23.737080000000002 5.904501 21.418080000000003 4.973881C23.937200000000004 4.5081560000000005 26.519460000000002 4.085806000000001 28.376120000000004 3.7947010000000008C28.376120000000004 3.7946453179000006 19.370760000000004 2.7013810000000005 8.358420000000002 4.414499000000001L9.412540000000002 1.364679000000001L6.497860000000001 3.520859000000001L4.442800000000001 0.858699000000001L4.324531000000001 4.464059000000001L0.897911000000001 5.542179000000001L4.249861000000001 6.913239000000001L4.236664300000001 10.198599000000002L6.192894300000001 7.622079000000001L9.099554300000001 8.802649L8.143547300000002 6.432539C12.463087300000002 6.813516 22.5756473 8.818239 26.440547300000002 13.067009Z" fill="none"></path> </symbol> </defs> <use id="SvgjsUse1034" xlink:href="#shape_id70" x="0" y="0" width="50"></use> </svg> This is fine in both browser and Illustrator. But when I add attributes stroke-width="0.1" stroke="#000". In Illustrator, the size of the shape changesto 48.951. It's still 50 in browser though. I tried to add these attributes to the <symbol />, <path /> and <use /> elements with the same result. I know that the SVG standard doesn't have any attribute that would control how to render the stroke. I know there is a discussion about the stroke-alignment attribute for future versions of SVG. But browsers don't support that yet, and neither Adobe Illustrator. So my question is: Is there any way how to adjust the SVG so that Illustrator would render the shape with the size that is set by the width attribute in the <use /> element regardless of the stroke settings
The width value on your <use> should be having no effect on your <symbol> because your symbol has no viewBox attribute. Without a viewBox, only the x and y attributes of the <use> will be doing anything. Also, be aware that we've seen a few questions on S.O. in the past, complaining about bugs in Illustrator's SVG import filter. If <symbol> is working, then that's great. However, in general, you may find that keeping your SVG structure simple, and avoiding the more advanced SVG features, might be a good idea.
linked image in svg does not show
I have a problem with svg files, where linked images don't show up when opened with any program. Strange thing is, all has been working fine up to just a few days ago! I did noting to change the files and the referenced image is perfectly fine and sits in the same folder. Now, the following svg just shows an empty black canvas, no matter if I open it with the image viewer, an internet browser or an image processing program: <?xml version="1.0" encoding="ISO-8859-1" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd."> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600"> <title> state0709.svg</title> <defs> <image id="mol" width="6px" height="3px" xlink:href="PTCDA.svg" /> </defs> <rect x="0" y="0" width="600" height="600" /> <use x="492" y="250" xlink:href="#mol" /> </svg> I have absolutely no clue what I broke and why it doesn't work anymore. Thanks for your help! EDIT: Ok, so apparently it is a problem with the scaling of the referenced image. It just takes the top left 6x3 corner and renders that, instead of resizing the image down to 6x3. How do I get the image to resize? I know it did it before... Btw, size of PTCDA.svg is width 200, height 100 px.
Try adding a fill value to the rect.
Default background color of SVG root element
I'd like to set a default background color for the entire SVG document, to red for example. <svg viewBox="0 0 500 600" style="background: red">/* content */</svg> The solution above works but the background property of the style attribute is unfortunately not a standard one : http://www.w3.org/TR/SVG/styling.html#SVGStylingProperties, and so it gets removed during the cleaning process with SVG Cleaner. Is there another way to declare this background color?
SVG 1.2 Tiny has viewport-fill I'm not sure how widely implemented this property is though as most browsers are targetting SVG 1.1 at this time. Opera implements it FWIW. A more cross-browser solution currently would be to stick a <rect> element with width and height of 100% and fill="red" as the first child of the <svg> element, for example: <rect width="100%" height="100%" fill="red"/>
Found this works in Safari. SVG only colors in with background-color where an element's bounding box covers. So, give it a border (stroke) with a zero pixel boundary. It fills in the whole thing for you with your background-color. <svg style='stroke-width: 0px; background-color: blue;'> </svg>
It is the answer of #Robert Longson, now with code (there was originally no code, it was added later): <?xml version="1.0" encoding="UTF-8"?> <svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <rect width="100%" height="100%" fill="red"/> </svg> This answer uses: https://stackoverflow.com/a/11293812/6747994 https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes
Let me report a very simple solution I found, that is not written in previous answers. I also wanted to set background in an SVG, but I also want that this works in a standalone SVG file.
Well, this solution is really simple, in fact SVG supports style tags, so you can do something like
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50">
<style>svg { background-color: red; }</style>
<text>hello</text>
</svg>
I'm currently working on a file like this:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="style.css" ?>
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="100%"
height="100%"
viewBox="0 0 600 600">
...
And I tried to put this into style.css:
svg {
background: #bf1f1f;
}
It's working on Chromium and Firefox, but I don't think that it's a good practice. EyeOfGnome image viewer doesn't render it, and Inkscape uses a special namespace to store such a background:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
version="1.1"
...
<sodipodi:namedview
pagecolor="#480000" ... >
Well, it seems that SVG root element is not part of paintable elements in SVG recommandations.
So I'd suggest to use the "rect" solution provided by Robert Longson because I guess that it is not a simple "hack". It seems to be the standard way to set a background with SVG.
background and background-color are not widely supported the shortest code without is to draw a circle with a radius of 10000, this does also work for width-height-aspect-ratios different to viewBox. <circle r="1e5" fill="red"/> <?xml version="1.0" encoding="UTF-8"?> <svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <circle r="1e5" fill="red"/> </svg>
Another workaround might be to use <div> of the same size to wrap the <svg>. After that, you will be able to apply "background-color", and "background-image" that will affect thesvg.
<div class="background">
<svg></svg>
</div>
<style type="text/css">
.background{
background-color: black;
/*background-image: */
}
</style>