I have the following SVG:
<svg width="15px" height="18px" viewBox="0 0 15 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Shape</title>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="question-controls" transform="translate(-52.000000, -1.000000)" fill="#72758D" fill-rule="nonzero">
<path d="M62,1 L54,1 C52.9,1 52,1.9 52,3 L52,13 L54,13 L54,3 L62,3 L62,1 Z M65,5 L58,5 C56.9,5 56,5.9 56,7 L56,17 C56,18.1 56.9,19 58,19 L65,19 C66.1,19 67,18.1 67,17 L67,7 C67,5.9 66.1,5 65,5 Z M65,17 L58,17 L58,7 L65,7 L65,17 Z" id="Shape"></path>
</g>
</g>
</svg>
It is a "Duplicate Icon" from Material IO.
https://material.io/resources/icons/?search=duplicat&icon=content_copy&style=baseline
However, as can you see it is not centered in its view port.
I tried by giving the same viewBox value like viewBox="0 0 100 100" with little success.
I have the following SVG image:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 66.667 108">
<pattern id="i" width="100%" height="100%">
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/3/38/Bangalore_Panorama_edit1.jpg" width="45" height="49" preserveAspectRatio="xMinYMin slice"/>
</pattern>
<rect x="21.667" y="0" width="45" height="49" fill="url(#i)"/>
</svg>
I need the rectangle to fill with an image equivalent to the following CSS syntax:
background-size:cover;
background-image:url("image.jpg");
background-repeat:no-repeat;
background-position:right top;
Thanks to this post, I got them all except background-position:right top. Is this possible in an SVG image? If so, how can I achieve this?
To mimic the behavior, so that the top right corner of the picture is located at the top right corner of the rect, you just need to change the preserveAspectRatio="xMinYMin slice" of the image to preserveAspectRatio="xMaxYMin slice":
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 66.667 108">
<pattern id="i" width="100%" height="100%">
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/3/38/Bangalore_Panorama_edit1.jpg" width="45" height="49" preserveAspectRatio="xMaxYMin slice"/>
</pattern>
<rect x="21.667" y="0" width="45" height="49" fill="url(#i)"/>
</svg>
Im currently working on a map for a Elections website The map is SVG and we need the map to be able to use stripes in 2 different colours depending on the election results.
as the results are announced the map will colour the areas i.e Red = labour for that elected area but in our case a area can have 2 Party's so we would need the map to display stripes red/blue to that area to show users the results.
Does anybody have any idea how this can be achieved?
one idea was to use the Fill colour option and overlay & image that's 50% fill colour and the other 50% transparent showing the background fill behind it , however we couldn't get the both to show
Below i have attached the code used for the map
<svg version="1.1"
id="svg5136" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:svg="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" inkscape:version="0.91 r13725" sodipodi:docname="close_up_02.svg"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="350px"
height="350px" viewBox="0 0 660.811 535.805" enable-background="new 0 0 660.811 535.805" xml:space="preserve">
<g id="g5144" transform="matrix(1.25,0,0,-1.25,-188.59631,638.40215)" inkscape:label="ElectSuf Mapbse nl" inkscape:groupmode="layer">
<path id="path6049" inkscape:connector-curvature="0" fill="#FFFFFF" stroke="#000000" stroke-width="2.24" d="M289.6,296
l-15.2,10.4l1.6,10.4l0.8,16l3.2,10.4l8,14.4l6.4,12.8l2.4,11.2l3.2,1.6l16,17.6l-3.2,3.2l7.2,3.2l0.8,4l20.8,17.6h3.2l12,10.4
l12.8,11.2l-2.4,12l4.8,3.2l4-2.4l4-10.4l-2.4-4l1.6-6.4l2.4-6.4l-0.8-6.4l0.8-7.2l12-14.4l7.2-6.4v-6.4l-0.8-6.4l-0.8-4.8l1.6-5.6
l13.6-0.8l-3.2-3.2l2.4-4l1.6-4.8v-4v-6.4l-6.4-0.8l-1.6-4.8l-1.6-4.8l-2.4-5.6l-4.8-2.4l-4-3.2l0.8-8.8l7.2-1.6l10.4-0.8l1.6-2.4
l12.8,4l-2.4-4l0.8-4l6.4-8l4.8-7.2l2.4-4l7.2-4l6.4-6.4l3.2-6.4l3.2-6.4l-1.6-5.6l-8.8-0.8l-4.8-2.4l-1.6-8L412,268l-11.2,5.6
l-2.4,5.6h-4.8l-4.8,1.6l-5.6-0.8l-4.8-0.8l-6.4-0.8l-4,9.6l-28-3.2l-10.4-2.4l-9.6,0.8l-3.2-2.4l-4.8-1.6L289.6,296z"/>
<path id="path6053" inkscape:connector-curvature="0" fill="#ffffff" stroke="#000000" stroke-width="2.24" d="M493.6,363.2l7.2-4
L560,360l-0.8-87.2l-4-2.4l-6.4-1.6l-24,4l-8.8,1.6l-18.4,2.4L484,280l-11.2,3.2l-5.6-12l-8-3.2l-0.8,5.6l-4,10.4l-6.4,8l-8.8,5.6
l-8.8,11.2l-5.6,8.8l2.4,8l-12-4.8l-3.2,2.4h-9.6l-5.6,1.6l-2.4,8.8l8.8,4.8l4.8,15.2l6.4,1.6l0.8,9.6l-0.8,4l-3.2,4.8l1.6,4.8
h-10.4l-4,6.4l0.8,9.6l6.4,1.6l4.8,3.2l0.8,2.4h5.6l11.2,5.6l8,2.4l1.6,8l10.4-14.4l10.4-12l13.6-9.6l18.4-8l3.2-3.2V363.2z"/>
</g>
</svg>
You probably need patterns, here's a snippet:
<svg version="1.1"
id="svg5136" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:svg="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" inkscape:version="0.91 r13725" sodipodi:docname="close_up_02.svg"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="350px"
height="350px" viewBox="0 0 660.811 535.805" enable-background="new 0 0 660.811 535.805" xml:space="preserve">
<defs>
<pattern id="red-blue" viewBox='0 0 1 1' x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
<rect x=0 y=0 width=1 height=1 fill='#f33' />
<path d='M0 0 L1 1' stroke=#55f stroke-width='.33' />
<path d='M0 -1 L2 1' stroke=#55f stroke-width='.33' />
<path d='M-1 0 L1 2' stroke=#55f stroke-width='.33' />
</pattern>
</defs>
<g id="g5144" transform="matrix(1.25,0,0,-1.25,-188.59631,638.40215)" inkscape:label="ElectSuf Mapbse nl" inkscape:groupmode="layer">
<path id="path6049" inkscape:connector-curvature="0" fill="url(#red-blue)" stroke="#000000" stroke-width="2.24" d="M289.6,296
l-15.2,10.4l1.6,10.4l0.8,16l3.2,10.4l8,14.4l6.4,12.8l2.4,11.2l3.2,1.6l16,17.6l-3.2,3.2l7.2,3.2l0.8,4l20.8,17.6h3.2l12,10.4
l12.8,11.2l-2.4,12l4.8,3.2l4-2.4l4-10.4l-2.4-4l1.6-6.4l2.4-6.4l-0.8-6.4l0.8-7.2l12-14.4l7.2-6.4v-6.4l-0.8-6.4l-0.8-4.8l1.6-5.6
l13.6-0.8l-3.2-3.2l2.4-4l1.6-4.8v-4v-6.4l-6.4-0.8l-1.6-4.8l-1.6-4.8l-2.4-5.6l-4.8-2.4l-4-3.2l0.8-8.8l7.2-1.6l10.4-0.8l1.6-2.4
l12.8,4l-2.4-4l0.8-4l6.4-8l4.8-7.2l2.4-4l7.2-4l6.4-6.4l3.2-6.4l3.2-6.4l-1.6-5.6l-8.8-0.8l-4.8-2.4l-1.6-8L412,268l-11.2,5.6
l-2.4,5.6h-4.8l-4.8,1.6l-5.6-0.8l-4.8-0.8l-6.4-0.8l-4,9.6l-28-3.2l-10.4-2.4l-9.6,0.8l-3.2-2.4l-4.8-1.6L289.6,296z"/>
<path id="path6053" inkscape:connector-curvature="0" fill="#ffffff" stroke="#000000" stroke-width="2.24" d="M493.6,363.2l7.2-4
L560,360l-0.8-87.2l-4-2.4l-6.4-1.6l-24,4l-8.8,1.6l-18.4,2.4L484,280l-11.2,3.2l-5.6-12l-8-3.2l-0.8,5.6l-4,10.4l-6.4,8l-8.8,5.6
l-8.8,11.2l-5.6,8.8l2.4,8l-12-4.8l-3.2,2.4h-9.6l-5.6,1.6l-2.4,8.8l8.8,4.8l4.8,15.2l6.4,1.6l0.8,9.6l-0.8,4l-3.2,4.8l1.6,4.8
h-10.4l-4,6.4l0.8,9.6l6.4,1.6l4.8,3.2l0.8,2.4h5.6l11.2,5.6l8,2.4l1.6,8l10.4-14.4l10.4-12l13.6-9.6l18.4-8l3.2-3.2V363.2z"/>
</g>
</svg>
When I use a <svg> in order to display an icon, it looks perfectly crisp and sharp in Google Chrome. However, as soon as I open the svg in Firefox or Internet Explorer, the icon looks blurry.
It seems like those Browsers render the icon to half pixels. Only Google Chrome is doing a good job here.
What is the best approach to get crisp svg icons in all browsers? (We want to color the icons via fill:... so using a background-image or pixel graphics are no options)
What I have tried so far:
I have applied the CSS attribute shape-rendering. but this one is too crisp and edgy.
<svg width="16px" height="16px" 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 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
<path fill="#231F20" d="M16,16H0V0h6.8l2,3H16V16z M1,15h14V7H1V15z M1,6h14V4H8.2l-2-3H1V6z"></path>
</svg>
<svg width="32px" height="32px" 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 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
<path fill="#231F20" d="M16,16H0V0h6.8l2,3H16V16z M1,15h14V7H1V15z M1,6h14V4H8.2l-2-3H1V6z"></path>
</svg>
<button type="button" style="width: 42px; height: 42px;"><i style="background-image: none; pointer-events: none;">
<svg style="width: 24px; height: 24px;" viewBox="0 0 24 24" enable-background="new 0 0 24 24" 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" xml:space="preserve">
<rect y="19" fill="#231F20" width="24" height="2"></rect>
<rect y="3" fill="#231F20" width="24" height="2"></rect>
<rect y="11" fill="#231F20" width="24" height="2"></rect>
</svg>
</i></button>
<svg style="width: 24px; height: 24px;" viewBox="0 0 24 24" enable-background="new 0 0 24 24" 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" xml:space="preserve">
<rect y="19" fill="#231F20" width="24" height="2"></rect>
<rect y="3" fill="#231F20" width="24" height="2"></rect>
<rect y="11" fill="#231F20" width="24" height="2"></rect>
</svg>
Hack for Firefox:
svg {
transform: translateZ(0);
}
What about IE:
possible reason when svg container positioned in coordinates like 31.5 (not exactly on pixel line), IE will draw svg in this container the same way, a bit off pixel line.
Use much larger values for width and height.
What you are doing at the moment is essentially specifying a 24 x 16 pixel image, and expanding it to full screen size. SVG should be infinitely scalable, hence the name, but some Browsers, like some TVs are better at pixel interpolation than others.
I need to use pure svg for a project. I know how to get this effect simply with divs but I dont know how to make it work with svg, I dont know what im doing wrong.
I want to show a hidden black rect with white text when you hover on another polygon (and the polygon is 0.1 of opacity normal and changes to 0.8 of opacity on the same hover) Something like a tooltip with opacity and with a nice smooth transition, but pure SVG.
.showme {
opacity: 0.3;
}
.showme:hover {
opacity: 0.8;
}
.desc {
visibility: hidden;
}
.showme:hover + .desc {
visibility: visible;
}
<svg width="200" height="200" viewBox="0 0 1000 300"
xmlns="http://www.w3.org/2000/svg" version="1.1" >
<rect x="1" y="1" width="998" height="298" fill="blue" class="showme"/>
</svg>
<svg width="200" height="200" viewBox="0 0 1000 300"
xmlns="http://www.w3.org/2000/svg" version="1.1" class="desc" >
<rect x="1" y="1" width="998" height="298" fill="black" />
<text x="250" y="150" font-family="Verdana" font-size="55" fill="white">Hello world!</text>
</svg>
Please help :/
Thanks.
Keeping your svg, you can do with like this, but you'll need some slight changes:
<svg width="200" height="200" viewBox="0 0 1000 300"
xmlns="http://www.w3.org/2000/svg" version="1.1" >
<rect onmouseover='document.getElementById("desc").style.visibility = "visible"' onmouseout='document.getElementById("desc").style.visibility = "hidden"' x="1" y="1" width="998" height="298" fill="blue" class="showme"/>
</svg>
<svg width="200" height="200" viewBox="0 0 1000 300"
xmlns="http://www.w3.org/2000/svg" version="1.1" id="desc" >
<rect x="1" y="1" width="998" height="298" fill="black" />
<text x="250" y="150" font-family="Verdana" font-size="55" fill="white">Hello world!</text>
</svg>
https://jsfiddle.net/q6kkhvz7/2/