Change svg height - html

I have a svg in my page which forces its container's height. It moves other elements... Is it possible to change svg's height? Now svg element is a square and a rectangle will be better because height is too big.
<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"
viewBox="0 0 60 60" enable-background="new 0 0 30 30" xml:space="preserve" width="50%" height="11%">
<path fill="none" stroke="white" stroke-miterlimit="10" d="M19.7,7.6C15.3,4,9.1,4.1,5.3,7.7c-3.2,3-4,8-2.1,12
c2.1,4.4,7.1,6.6,11.3,5.7c2.6-0.5,4.3-2.1,5.1-2.9"/>
<line fill="none" stroke="white" stroke-width="1.1572" stroke-miterlimit="10" x1="19.3" y1="7.3" x2="10.8" y2="15.5"/>
<line fill="none" stroke="white" stroke-width="1.3426" stroke-miterlimit="10" x1="10.9" y1="14.8" x2="19.7" y2="23.2"/>
<line fill="none" stroke="none" stroke-width="1.1322" stroke-miterlimit="10" x1="14.7" y1="15.4" x2="23.5" y2="7.1"/>
<line fill="none" stroke="none" stroke-width="0.9577" stroke-miterlimit="10" x1="14.9" y1="14.9" x2="22.7" y2="22.6"/>
<path fill="none" stroke="none" stroke-width="1.0915" stroke-miterlimit="10" d="M22.9,7.2c0.3,0.1,0.6,0.4,1,0.7
c1.8,1.4,3.9,4.2,3.4,7.9c-0.4,3-2.4,5.6-5.2,6.7"/>
<text x="20" y="18" fill="White" class="textsvg" font-size="10">MENU</text>
</svg>
[Jsfiddle][1]
Thanks!


Look on this updated jsFiddle: https://jsfiddle.net/qqzox761/1/
I removed width and height from your svg and changed viewBox a little bit.
Now with this code of svg you can set size in css.


Change the viewbox attribute, here:
<svg ... viewBox="0 0 60 60" ...
It means it is a square SVG that starts at 0, 0 and have a size of 60 on each side. Changing this will only affect the aspect ratio of SVG view, you can assign its width more accurately in pixels or percent using CSS.


As noted by mwl, you need to delete the width and height from <svg>. The program you used to create the graphic adds data to viewbox automatically so while mwl modified it, it looks like you had extra white space when you saved the file. I also recreated your fiddle here but without the white space. The important thing to remember about SVG is that it's all about scaling which means, in part, that preserving the aspect ratio is more important than pixel dimensions. This is a great article by Amelia Bellany-Royds on CSS-Tricks if you want more information.

Related

Why doesn't this SVG display?

I'm working on a project that uses svg. I generate this svg code thanks to an ocaml library:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:l="http://www.w3.org/1999/xlink" version="1.1" width="161.8mm" height="100mm" viewBox="0 0 161.8 100" color-profile="auto" color-interpolation="linearRGB" color-interpolation-filters="linearRGB">
<g fill="none" stroke-miterlimit="9.98123" transform="matrix(100 0 0 -100 -0 100)">
<defs>
<path id="i1" d="M0 0L1.618 0L1.618 1L0 1Z"/>
</defs>
<use l:href="#i1" fill="#50C878"/>
</g>
</svg>
When I use gthumb or GIMP to display the svg, it prints the correct green square. However, when I include this block of code in Chromium or Firefox, the block appears in the html tree but nothing is display. This is the first time I use svg: after several researches on Google, I can't find anything....
Does someone know why it doesn't work ?
Edit
Solve with the answer:
<use xlink:href="#i1">

SVG: applying a filter on a path doesn't work in Chrome [duplicate]

I have the following SVG document:
<svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 21 484" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="dropShadow">
<feDropShadow dx="4" dy="0" stdDeviation="4"></feDropShadow>
</filter>
</defs>
<g id="Artboard" stroke-width="5" stroke="#FF0000" fill="#000000" stroke-linecap="round">
<path style="filter: url(#dropShadow)" d="M7.5,8.5 L7.5,471.5" id="path-1"></path>
</g>
</svg>
In Firefox, when I open the SVG document, it simply shows a very thin (not 5 wide) vertical line. In Chrome, it doesn't show anything (nor does it in codepen, here: https://codepen.io/jwir3/pen/BJBqEK ).
I'm not quite sure what I'm doing incorrectly here, but it has something to do with the filter, because, if I remove the filter: url(#dropShadow) from the path definition, the line shows up as expected.

You can't use objectBoundingBox units if your shape has no height or width.
Keyword objectBoundingBox should not be used when the geometry of the applicable element has no width or no height, such as the case of a horizontal or vertical line, even when the line has actual thickness when viewed due to having a non-zero stroke width since stroke width is ignored for bounding box calculations. When the geometry of the applicable element has no width or height and objectBoundingBox is specified, then the given effect (e.g., a gradient or a filter) will be ignored.
The default for filterUnits is objectBoundingBox units so you need to change that to userSpaceOnUse i.e.
<svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 21 484" xmlns="http://www.w3.org/2000/svg">
<title>Line Drop Shadow</title>
<description>A red line with 5px width thickness and round caps, having a drop-shadow. This highlights the regression documented in PURP-1017.</description>
<defs>
<filter id="dropShadow" filterUnits="userSpaceOnUse">
<feDropShadow dx="4" dy="0" stdDeviation="4"></feDropShadow>
</filter>
</defs>
<g id="Artboard" stroke-width="5" stroke="#FF0000" fill="#000000" stroke-linecap="round">
<path style="filter: url(#dropShadow)" d="M7.5,8.5 L7.5,471.5" id="path-1"></path>
</g>
</svg>

When processing filters, different browsers process in different stroke.
Chrome considers stroke as a value with a zero pixel, so it does not include it in the filter region.
Therefore, to make the result look the same in different browsers, it is better to replace path with stroke-width ="5", a rectangle with a width of 5px withoutstroke (stroke="none")
In addition, the default values for the filter area are: x =" - 10% "" y = "- 10%" `` width = "120%" `` height = "120%"- large blur sizes are usually truncated .
By default, filterUnits = "objectBoundingBox" and therefore the values are specified in percentages.
To make it easier to calculate the size of the filter region action, specify the value offilterUnits = "userSpaceOnUse" and then you can specify all dimensions for thefilter region` in pixels.
<svg preserveAspectRatio="xMinYMin meet" width="100%" height="100%" viewBox="0 0 21 484" xmlns="http://www.w3.org/2000/svg" >
<defs>
<filter id="dropShadow" filterUnits = "userSpaceOnUse" x="4" y="0" width="12" height="472">
<feDropShadow dx="6" dy="4" stdDeviation="3"></feDropShadow>
</filter>
</defs>
<g id="Artboard" fill="#FF0000" filter="url(#dropShadow)" >
<!-- <path style="filter: url(#dropShadow)" d="M7.5,8.5 L7.5,471.5" id="path-1" stroke-width="5" ></path>-->
<rect x="5" y="5" width="5" stroke="none" height="463" />
</g>
</svg>

Swapping to userSpaceOnUse is the correct answer in most circumstances but has the following limitations:
The filter effects region will apply from -10% to 120% of the canvas, rather than the bounding box of the element (using more memory and processing time)
For large dynamic SVGs (such as created by d3) it can be hard to calculate the required filter x/y/width/height to ensure the filter applies to all elements.
An alternate (less elegant) solution is to apply the filter to a <g> and use a hidden node within this to give the group the correct width or height:
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="dropShadow" width="20">
<feDropShadow dx="4" dy="0" stdDeviation="4"></feDropShadow>
</filter>
</defs>
<g id="Artboard" style="filter: url(#dropShadow)">
<circle r="5" cx="0" cy="0" visibility="hidden"></circle>
<path d="M10,10 L10,100" stroke-width="5" stroke="#FF0000" fill="#000000" stroke-linecap="round"></path>
</g>
</svg>

Change color of part of Material Icon

I would like to change only part of the color of Material icons (from google) like in the image. In the image it only shows the bottom bar changing color, not the entire A.
I went to several questions that only showed how to change the entire color of the materialize icon.
I realize that I can use svg, and I can break the image up into different paths and then specify the color of each of them as stated in jdnz's answer.
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
<path d="M5 17v2h14v-2z" fill="#00FFFF"/>
<path d="M12 5.98L13.87 11h-3.74zM9.5 12.8h5l.9 2.2h2.1L12.75 4h-1.5L6.5 15h2.1z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
However, I have several images, and I don't want to create many svg's.

If you use svg you can break the image up into different paths and then specify the color of each of them.
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
<path d="M5 17v2h14v-2z" fill="#00FFFF"/>
<path d="M12 5.98L13.87 11h-3.74zM9.5 12.8h5l.9 2.2h2.1L12.75 4h-1.5L6.5 15h2.1z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>

svg not sharp, but blurry

For whatever reason these svg files, seems blurry, and not 100% sharp in all browsers. These are svg files, and are enclosed within elements that are scaled to pixels, in other words using px and not % - hence no browser bitmap errors.
Any idea as to why this is happening?
This is one of the svg files;
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<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"
viewBox="0 0 361.5 192.5" style="enable-background:new 0 0 361.5 192.5;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;}
.st1{fill:#FC5500;}
.st2{fill:#FFFFFF;}
.st3{fill:#FB5500;}
</style>
<g>
<path class="st0" d="M-9.4-6.3c126,0,252,0,378,0c0,68.7,0,137.3,0,206c-126,0-252,0-378,0C-9.4,131-9.4,62.4-9.4-6.3z"/>
<path class="st1" d="M-0.2,112.1c0-8,0-15.9,0-24.4c112.3,0,224.3,0,336.7,0c0-29.4,0-58.4,0-87.7c8.4,0,16.4,0,25,0
c0,46.8,0,93.7,0,140.6c-2.4-0.3-2.5-2.5-3.2-4c-3.7-9-10.3-15-19.3-18.5c-15.2-6-31.2-6.7-47.2-5.5c-7.8,0.6-15.6,1.5-23.1,4.1
c-24.8,8.7-33.9,38-18.3,59.2c5.8,7.8,14.5,10.9,23.4,13.4c2,0.6,4.9-0.1,5.6,3.1c-13.9,0-27.9,0-41.8,0
c-8.1-5.7-14.1-13.6-21.4-20.2c-1.7-1.5-3.8-2.8-4.1-5.5c0.5-2.5,2.8-3.1,4.7-3.9c9.5-4.3,14.3-11.9,14.5-22.1
c0.2-10.1-4.8-17.3-13.9-21.8c-8.5-4.2-17.6-5.3-26.7-5.5c-20.8-0.4-41.6-0.1-62.5-0.1c-1.7,0-3.3,0-4.8,0.8
c-1.6,2.3-1.1,4.9-1.1,7.3c0,21.2,0,42.3,0,63.5c0,2.6,0.5,5.4-1.7,7.6c-32,0-64,0-96.1,0c-3.2-6.9-1.5-13.8-0.9-20.2
c3.1-2.6,6-2.3,8.8-2.3c12.7-0.1,25.3,0,38-0.1c7.8-0.1,15.3-1.6,22.2-5.3c17.8-9.6,18.8-33.3,1.7-44.3c-8.9-5.7-19.1-6.7-29.3-6.9
c-19.3-0.3-38.7,0.1-58-0.1C4.6,113.4,2,113.8-0.2,112.1z"/>
<path class="st2" d="M120.6,192.5c0-26.6,0-53.3,0-80.7c29.5,1.5,58.7-2.6,87.6,2.2c13.5,2.2,24.2,9.5,24.9,25.1
c0.6,14.2-6.8,23.1-20.2,27c8.3,8.8,16.5,17.6,24.7,26.4c-11.2,0-22.5,0-33.7,0c-4-1.4-6-5-8.7-7.9c-12.1-13.2-6.6-11-23.7-11.2
c-5.5-0.1-10.9,0-16.4,0c-2,0-4-0.2-6,1c-1.5,3.5-0.5,7.4-0.8,11.1c-0.2,2.4,0.3,5-1.7,7.1C138,192.5,129.3,192.5,120.6,192.5z"/>
<path class="st2" d="M203.8,0.7c-4.9,6.4-10,13.1-15.2,20c-18.4,0-36.7,0-55,0c-4.1,0-9-0.2-8.9,5.9c0,6.1,4.8,5.9,9,6
c16.8,0.2,33.7-0.4,50.5,0.6c12.5,0.7,22.4,6.1,22.6,20.9c0.2,14.6-7.3,24.7-22.5,25.3c-28.5,1.2-57.1,0.3-85.9,0.3
c5-6.5,10.1-13.2,15.3-20c19.3,0,38.4,0.1,57.6-0.1c4.4,0,11.3,1.9,11.3-5.3c0.1-7.7-7-5.4-11.6-5.5c-16.1-0.4-32.4,0.3-48.4-0.9
c-13-1-21.7-8.1-21.9-22.5c-0.2-14.9,8.5-23.6,22-24.3C149.5-0.2,176.6,0.7,203.8,0.7z"/>
<path class="st2" d="M279.5,192.5c-31.5-9.3-41.2-22.1-36.9-48.9c2.8-17.6,15-26,31-29.7c18.9-4.4,38-4.4,57-0.2
c15.1,3.4,26.5,11.3,31,27c0,7.6,0,15.2,0,22.9c-2.8,16.5-15.6,27.1-34.6,28.6c-1,0.1-2-0.2-2.9,0.3
C309.1,192.5,294.3,192.5,279.5,192.5z"/>
<path class="st2" d="M77.2,20.7c-17.1,0-33.9,0-51.1,0c0,3.2,0,6.3,0,9.8c20.5,0,41.1,0,62.9,0c-5.3,6.7-9.8,12.4-14.4,18.2
c-16.2,0-32.1,0-48.5,0c0,3.6,0,7,0,10.8c22,0,44.1,0,67.6,0c-5.9,7.7-11,14.5-16,21.1c-26,0-51.6,0-77.6,0C0,53.7,0,27,0,0
c30.7,0,61.4,0,93,0C87.6,7.1,82.5,13.8,77.2,20.7z"/>
<path class="st2" d="M-0.2,112.1c25.3,0.1,50.6-0.4,75.9,0.7c20.2,0.9,32.8,13.2,32.7,29.5c-0.1,16.5-13.5,28.5-34.1,29.3
c-16.3,0.6-32.6,0.1-49.7,0.1c0,7.4,0,14.1,0,20.9c-8.1,0-16.3,0-24.8,0C-0.2,165.6-0.2,138.8-0.2,112.1z"/>
<path class="st2" d="M233.3-0.2c18.6,0,37-0.5,55.3,0.1c21,0.7,34.6,13.1,34.6,30.5c0,17.4-13.8,29.5-35.4,30.1
c-15.1,0.5-30.3,0.1-45.9,0.1c0,6.7,0,13.1,0,19.8c-8.6,0-16.6,0-25,0c0-13.4,0-26.6,0-40.7c22.6,0,45.3,0,68.1,0
c5.2,0,10.8-0.6,12.4-6.2c2.6-9.1-3-12.6-11.1-12.7c-22.7-0.2-45.5-0.1-69.4-0.1C222.7,13.3,227.9,6.6,233.3-0.2z"/>
<path class="st1" d="M146.7,192.5c0-6.8,0-13.6,0-20.8c13.2,0,26.1,0,39.7,0c5.6,6.6,11.6,13.7,17.6,20.8
C184.9,192.5,165.8,192.5,146.7,192.5z"/>
<path class="st3" d="M323.9,192.5c17.1-3.7,32.3-9.9,37.6-29c0,9.5,0,18.9,0,29C349,192.5,336.4,192.5,323.9,192.5z"/>
<path class="st3" d="M145.8,150.8c0-5.7,0-11.4,0-17.1c17.9,0,35.6-0.2,53.3,0.2c4.4,0.1,7.8,3.1,7.7,8.3c-0.1,6-4.5,8.4-9.3,8.5
C180.4,151,163.3,150.8,145.8,150.8z"/>
<path class="st1" d="M302.2,173.1c-6-0.4-11.4-0.7-16.9-1.1c-12.8-1.1-18.4-8-18.1-20.9c0.3-12.7,7.6-17.4,19-18.6
c11.1-1.1,22.3-1.2,33.4,0.1c11.3,1.3,17.2,7.1,17.3,19c0.1,11.8-5,18.7-16.7,20C314.1,172.4,307.9,172.7,302.2,173.1z"/>
<path class="st3" d="M25.1,133c15.6,0,30.9-0.2,46.2,0.1c5.6,0.1,11.1,1.8,11.2,8.7c0.2,7.1-5.2,9.3-11.1,9.4
c-15.3,0.3-30.6,0.1-46.3,0.1C25.1,145.5,25.1,139.6,25.1,133z"/>
</g>
</svg>

If you want your SVG to be at its sharpest, then design it so that its shapes - especially the horizontal and vertical parts of the shapes - are on pixel boundaries.
For example, compare the following two examples:
<svg width="50" height="50">
<rect x="9.5" y="9.5" width="31" height="31"/>
</svg>
<svg width="50" height="50">
<rect x="10" y="10" width="30" height="30"/>
</svg>
Here's what this looks like at 4X enlargement.
Any time your shape passes through the middle of pixels, you will get grey pixels due to the anti-aliasing that 2D renderers use.

The response used a slightly modified code #Paul LeBeau
You can use the SVG attribute - shape-rendering =" crispEdges " to disable browser anti-aliasing.
https://developer.mozilla.org/ru/docs/Web/SVG/Attribute/shape-rendering
crispEdges
Indicates that the user agent shall attempt to emphasize the contrast
between clean edges of artwork over rendering speed and geometric
precision. To achieve crisp edges, the user agent might turn off
anti-aliasing for all lines and curves or possibly just for straight
lines which are close to vertical or horizontal. Also, the user agent
might adjust line positions and line widths to align edges with device
pixels.
<svg width="50" height="50">
<rect x="9.5" y="9.5" width="31" height="31" shape-rendering="crispEdges"/>
</svg>
<svg width="50" height="50">
<rect x="10" y="10" width="30" height="30"/>
</svg>
The image is increased 4 times
No gray pixels are observed.
Update 2019 by comments
There is no universal, 100% solution to the pixelation problem.
Since the rendering depends on the installed operating system, its settings, the video card and which browser is used.
You can use an integrated approach made up of all the answers of this topic:
Use integer svg image coordinate values by answer #Paul LeBeau
If you take a finished image with fractional values, you can process
it with SVG optimizer
Set the integer value of viewBox by answer #AKX
Use the attribute shape-rendering ="crispEdges"
If a design change is possible, avoid contrasting border colors.
For example, use a dark gray color instead of a black and white combination or use shades of gray instead of a pure white background.

I tried the SVG on a page and it doesn't look really blurry to me.
However, you could try editing the viewbox to have an integer size -- i.e. turn viewBox="0 0 361.5 192.5" into viewBox="0 0 362 193" -- that might make a difference.

it might be caused by use of borders and shadows in creation of the svg.
I avoid those myself as they are sometimes blurry.
Shadow if needed can be created as another path with transparency and offset.

SVG path not observing aspect ratio

I'm having trouble getting the SVG path to scale to its container:
<svg xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMidYMid"
viewBox="0 0 16 16"
width="16"
height="16">
<path stroke="#000" fill="none" d="M209,15a195,195 0 1,0 2,0zm1,0v390m195-195H15M59,90a260,260 0 0,0 302,0 m0,240 a260,260 0 0,0-302,0M195,20a250,250 0 0,0 0,382 m30,0 a250,250 0 0,0 0-382"></path>
</svg>
Demo: http://jsfiddle.net/FeTv2/1/ - As you can see the path is way too big, and seems to have a top and left offset.
Looks the same in Chrome and Firefox.

The viewBox of you SVG is way too small to fit the path you're using. The viewBox represents the part of your SVG, that should be shown. The width and height the represent the dimension of the box, in which the content is shown.
Try a viewBox size, that really fits your path like this (may need further adjustments):
<svg height="16" width="16"
viewBox="0 0 450 450"
preserveAspectRatio="xMidYMid"
xmlns="http://www.w3.org/2000/svg">
<path d="M209,15a195,195 0 1,0 2,0zm1,0v390m195-195H15M59,90a260,260 0 0,0 302,0 m0,240 a260,260 0 0,0-302,0M195,20a250,250 0 0,0 0,382 m30,0 a250,250 0 0,0 0-382" fill="none" stroke="#000"/>
</svg>
Additionally, you may (or may not) want to adjust the size of the <svg> element.
Example Fiddle (big <svg>)
Example Fiddle (16x16 <svg>)