The .svg in my header.php will not change size - svg
I inherited this site and am trying to change the Logo.
I managed to paste new .svg in the place of the old one but the new one will not resize at all.
<body <?php body_class(); ?>>
<svg viewBox="0 0 100 100" width="100%" height="auto" style="display: none">
<symbol id="vestoj-logo">
<title><?php bloginfo( 'name' ); ?></title>
<path d="M0,.19H3.29l1.21,4.08c.1,.34,.17,.85,.2,1.16h.08c.01-.35,.08-.79,.18-1.16L6.14,.19h3.29l-3.35,8.67H3.37L0,.19Z"/>
<path d="M9.58,8.87V.19h5.85V2.57h-2.7v.81h2.46v2.28h-2.46v.83h2.78v2.38h-5.93Z"/>
<path d="M21.6,2.96c-.38-.26-1.07-.65-1.77-.65-.17,0-.43,.03-.6,.16-.12,.09-.16,.18-.16,.31,0,.18,.03,.35,.51,.45l1,.22c.77,.17,1.22,.48,1.48,.74,.55,.53,.66,1.2,.66,1.72,0,.74-.2,1.43-.78,2.04-.49,.51-1.43,1.1-3.05,1.1-1.33,0-2.21-.38-2.95-.68l-.29-.12,.95-2.44,.34,.26c.33,.25,.99,.64,1.75,.64,.43,0,.61-.1,.68-.16,.14-.12,.17-.26,.17-.39,0-.08-.01-.21-.1-.3-.1-.1-.27-.14-.6-.21l-.77-.14c-.49-.09-1.03-.25-1.51-.74-.44-.46-.62-.98-.62-1.6,0-.81,.27-1.5,.84-2.07,.66-.68,1.64-1.12,3.02-1.12,.69,0,1.59,.12,2.64,.75l-.84,2.21Z"/>
<path d="M24.36,8.87V2.94l-1.77,.08V.19h6.63V3.02l-1.77-.08v5.93h-3.09Z"/>
<path d="M37.56,7.67c-.74,.75-1.95,1.39-3.6,1.39s-2.86-.64-3.6-1.39c-.68-.69-1.21-1.75-1.21-3.15s.53-2.44,1.21-3.13c.74-.75,1.95-1.39,3.6-1.39s2.86,.64,3.6,1.39c.68,.69,1.21,1.75,1.21,3.13s-.53,2.46-1.21,3.15Zm-4.73-4.43c-.31,.33-.49,.83-.49,1.3,0,.49,.18,.98,.49,1.29,.26,.26,.65,.44,1.13,.44s.87-.18,1.13-.44c.29-.29,.49-.74,.49-1.29s-.18-1-.49-1.3c-.23-.23-.61-.44-1.13-.44-.56,0-.92,.22-1.13,.44Z"/>
<path d="M40.3,.19h3.09V6.24c0,.95-.44,1.59-.78,1.94-.57,.6-1.37,.88-2.17,.88-.6,0-1.43-.13-2.24-.7l-.35-.25,1.14-2.68,.06,.22c.05,.18,.17,.43,.29,.53,.09,.09,.22,.16,.4,.16,.16,0,.27-.05,.36-.16,.17-.19,.18-.51,.18-.64V.19Z"/>
</symbol>
</svg>
I tried changing the viewBox and the width= to other values but nothing changes.
Related
SVG in SVG image looks different on Firefox and Chrome
Below is a minimal working example of my problem. The problem arises in the context of a larger JavaScript program which places images into an SVG area. The images usually are PNGs or JPGs, but I want to support SVG as well. The result needs to be the same on all browsers. However, this doesn't work in the "SVG in SVG" case. On my Win10 machine, this looks as expected on Firefox (88.0.1), but it looks slightly askew on Chrome 90.0.4430.212. On Chrome, the black and blue lines don't intersect in one point, the blue lines extend beyond the gray area, and the whole thing simply doesn't look symmetric. Is this is a bug in one of the browsers? What can I do to make this look the same in both browsers? Here's the HTML: <!doctype html> <html> <body> <svg style="border:1px solid black" viewBox="0 0 16 9" height="450" width="800"> <rect x="0.1" y="0.1" width="15.8" height="8.8" fill="lightgray"></rect> <line x1="8" y1="0" x2="8" y2="9" stroke="black" stroke-width="0.03"></line> <image x="0.1" y="0.1" width="15.8" height="8.8" href="foo.svg"></image> </svg> </body> </html> And here's foo.svg: <?xml version="1.0"?> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="300" viewBox="0 0 500 300"> <path stroke-width="1" stroke="blue" fill="none" d="M 0,0 L 0,300 L 500,0 L 500,300 Z" /> </svg> And, yes, I know that 500/300 is not the same as 15.8/8.8. This is on purpose. <svg style="border:1px solid black" id="svg" viewBox="0 0 16 9" height="450" width="800"> <rect x="0.1" y="0.1" width="15.8" height="8.8" fill="lightgray"></rect> <line x1="8" y1="0" x2="8" y2="9" stroke="black" stroke-width="0.03"></line> <image x="0.1" y="0.1" width="15.8" height="8.8" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' width='500' height='300' viewBox='0 0 500 300'%3E%3Cpath stroke-width='1' stroke='blue' fill='none' d='M 0,0 L 0,300 L 500,0 L 500,300 Z' /%3E%3C/svg%3E"></image> </svg>
Scale more than one dynamically loaded SVG images in a single parent container -Angular7
I have a requirement where I need to add on SVG images one after another(stack vertically) and it should scale accordingly without any scrollbar for parent container in Angular7. The images are added dynamically. My problem is I don't know how to scale these images with respect to the parent container (There is only one single parent container for all the SVG's) and there should not be any scrollbar to view the svgs. The SVG images should scale accordingly. My HTMl is like this: <div id="stackedSVGParentContainer"> <svg width="16" height="4.5" viewBox="0 0 16 5" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M0.738516 4.5L2.33852 0.5H13.6615L15.2615 4.5H2.33852Z" fill="#E0E0E0" stroke="#212121"/> <line x1="1" y1="1.75" x2="15" y2="1.75" stroke="#262121" stroke-width="0.5"/> <line x1="2" y1="3.25" x2="14" y2="3.25" stroke="#262121" stroke-width="0.5"/> </svg> <svg width="16" height="135" viewBox="0 0 16 150" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect _ngcontent-ng-cli-universal-c326="" x="2.5" y="25.5" width="11" height="99" fill="#E0E0E0" stroke="#262121"></rect> </svg> <svg width="16" height="135" viewBox="0 0 16 150" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect _ngcontent-ng-cli-universal-c326="" x="2.5" y="25.5" width="11" height="99" fill="#E0E0E0" stroke="#212621"></rect> </svg> </div>
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>
How to resize a svg icon (use href)
I have all my icons added as symbols in the html file, eg: <symbol id="flag-bg"><g fill-rule="evenodd" stroke-width="1pt"><path fill="#d62612" d="M0 319.997h640V480H0z"/><path fill="#fff" d="M0 0h640v160.003H0z"/><path fill="#00966e" d="M0 160.003h640v160.003H0z"/></g></symbol> And I want to use it to display an icon of 32 by 24 <svg width="32" height="24" viewbox="0 0 32 24" id="#lg-bg"><use href="#flag-bg"><title></title></use></svg> But it doesn't resize the flag to fill the size. What's the magic properties to make it happen?
You have to set a viewBox attribute on the <symbol> element that matches the size of its grafical content. To find out what size that is, you can use the .getBBox() function. Temporarily exchange <symbol> for <svg>, and don't mind if the grafical output makes no sense. You only need the numbers on the console:
console.log(document.querySelector('#flag-bg').getBBox())
<svg>
<svg id="flag-bg">
<g fill-rule="evenodd" stroke-width="1pt">
<path fill="#d62612" d="M0 319.997h640V480H0z"/>
<path fill="#fff" d="M0 0h640v160.003H0z"/>
<path fill="#00966e" d="M0 160.003h640v160.003H0z"/>
</g>
</svg>
</svg>
Then, use these values for your viewBox. There is no need to set a size on the <use> element, it defaults to 100% (of the surrounding <svg>) element.
<svg width="0" height="0">
<symbol id="flag-bg" viewbox="0 0 640 480">
<g fill-rule="evenodd" stroke-width="1pt">
<path fill="#d62612" d="M0 319.997h640V480H0z"/>
<path fill="#fff" d="M0 0h640v160.003H0z"/>
<path fill="#00966e" d="M0 160.003h640v160.003H0z"/>
</g>
</symbol>
</svg>
<svg width="32" height="24" viewbox="0 0 32 24" id="#lg-bg">
<use href="#flag-bg"><title></title></use>
</svg>
you can use viewbox property to scale your svg icon check this code and reference link in below <h1>Auto-Scaling an SVG Image with a <code>viewBox</code> <div>—watch out for IE and table layouts</div></h1> <figure> <figcaption><code>img</code>, 100xauto height</figcaption> <div> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/91525/potofgold.svg" style="width:100px"> </div> </figure> <figure> <figcaption><code>img</code>, auto widthx50</figcaption> <div> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/91525/potofgold.svg" style="height:50px"> </div> </figure> <figure> <figcaption><code>img</code>, auto size</figcaption> <div> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/91525/potofgold.svg"> </div> </figure> you can use viewbox property and scale your svg icons in it .. reference link clickhere
Adding svg to page from svg sprite
I'm using grunt-svgstore in my grunt set up to create a svg sprite file from svg I add to my project.
The output is something like this.
<svg xmlns="http://www.w3.org/2000/svg"><symbol viewBox="0 0 32 32" id="shape-times"><title>times</title><desc>Created with Sketch.</desc> <!-- Generator: Sketch 3.4.4 (17249) - http://www.bohemiancoding.com/sketch --> <g id="times-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"> <g id="times-times" sketch:type="MSArtboardGroup" fill="#B7C0C7"> <path d="M17.4142136,16 L23.7764339,9.63777963 C24.1745374,9.23967616 24.1686989,8.6123497 23.7781746,8.22182541 C23.3849276,7.82857845 22.753706,7.83208044 22.3622204,8.22356607 L16,14.5857864 L9.63777963,8.22356607 C9.23967616,7.8254626 8.6123497,7.83130112 8.22182541,8.22182541 C7.82857845,8.61507236 7.83208044,9.246294 8.22356607,9.63777963 L14.5857864,16 L8.22356607,22.3622204 C7.8254626,22.7603238 7.83130112,23.3876503 8.22182541,23.7781746 C8.61507236,24.1714215 9.246294,24.1679196 9.63777963,23.7764339 L16,17.4142136 L22.3622204,23.7764339 C22.7603238,24.1745374 23.3876503,24.1686989 23.7781746,23.7781746 C24.1714215,23.3849276 24.1679196,22.753706 23.7764339,22.3622204 L17.4142136,16 L17.4142136,16 Z" sketch:type="MSShapeGroup"/> </g> </g> </symbol></svg>
At the top of my document I'm adding a reference to the svg file.
<?php include_once("images/svg/processed/svg-defs.svg"); ?>
Whats the best way or how do I show the svg on the page. I'm trying things like this.
<object type="image/svg+xml" width="100" height="100" data="#times-Icons"></object>
To can reference a <symbol> element with a <use> element.
You should include the SVG with the symbols at the top of your document. Actually it could go anywhere, but I believe Safari has a bug which requires the definitions to be before the references to them.
You will need to hide the symbol definition SVG so it is not visible. To do that can either use display="none" or set width="0" height="0".
Then to reference the symbol, create another SVG of the desired size with a <use> element.
<svg width="40px" height="40px">
<use xlink:href="#shape-times"/>
</svg>
You can set the size explicitly as above, or use CSS as in the following example.
.large {
width: 40px;
height: 40px;
}
.small {
width: 24px;
height: 24px;
}
<svg xmlns="http://www.w3.org/2000/svg" display="none"><symbol viewBox="0 0 32 32" id="shape-times"><title>times</title><desc>Created with Sketch.</desc> <!-- Generator: Sketch 3.4.4 (17249) - http://www.bohemiancoding.com/sketch --> <g id="times-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"> <g id="times-times" sketch:type="MSArtboardGroup" fill="#B7C0C7"> <path d="M17.4142136,16 L23.7764339,9.63777963 C24.1745374,9.23967616 24.1686989,8.6123497 23.7781746,8.22182541 C23.3849276,7.82857845 22.753706,7.83208044 22.3622204,8.22356607 L16,14.5857864 L9.63777963,8.22356607 C9.23967616,7.8254626 8.6123497,7.83130112 8.22182541,8.22182541 C7.82857845,8.61507236 7.83208044,9.246294 8.22356607,9.63777963 L14.5857864,16 L8.22356607,22.3622204 C7.8254626,22.7603238 7.83130112,23.3876503 8.22182541,23.7781746 C8.61507236,24.1714215 9.246294,24.1679196 9.63777963,23.7764339 L16,17.4142136 L22.3622204,23.7764339 C22.7603238,24.1745374 23.3876503,24.1686989 23.7781746,23.7781746 C24.1714215,23.3849276 24.1679196,22.753706 23.7764339,22.3622204 L17.4142136,16 L17.4142136,16 Z" sketch:type="MSShapeGroup"/> </g> </g> </symbol></svg>
<svg width="40px" height="40px">
<use xlink:href="#shape-times"/>
</svg>
<svg class="large">
<use xlink:href="#shape-times"/>
</svg>
<svg class="small">
<use xlink:href="#shape-times"/>
</svg>