Scale SVG to container without mask/crop
You absolutely must have a
viewBox
attribute on your SVG element that describes the bounding box of the contents you want to be always visible. (The file that you link to does not; you'll want to add one.)To cause your SVG to fill an HTML element, put the CSS attribute
position:relative
(orposition:absolute
orposition:fixed
if appropriate) on your wrapper, and thenSet the CSS attribute
position:absolute
on your<svg>
element to cause it to sit inside and fill your div. (If necessary, also applyleft:0; top:0; width:100%; height:100%
.)
Once you have a viewBox
and your SVG sized correctly the default value of the preserveAspectRatio
attribute will do what you want. In particular, the default of xMidYMid meet
means that:
- The aspect ratio described by your viewBox will be preserved when rendering.
By comparison, a value ofnone
would allow non-uniform scaling. - The viewBox will always
meet
either top/bottom or left/right, with 'letterboxing' keeping the other dimension inside.
By comparison, a value ofslice
ensures that your viewBox fully fills the rendering, with either the top/bottom or left/right falling outside the SVG. - The viewBox will be kept vertically and horizontally centered within the SVG viewport.
By comparison, a value ofxMinYMax
would keep it in the bottom-left corner, with padding only to the right or top.
You can see this live here: http://jsfiddle.net/Jq3gy/2/
Try specifying explicit values for preserveAspectRatio
on the <svg>
element and press "Update" to see how they affect the rendering.
Edit: I've created a simplified version of the US Map with a viewBox (almost half the bytes) and used that in an updated demo to suit your exact needs: http://jsfiddle.net/Jq3gy/5/
My SVG won't scale
It seems to work for me (at least in Firefox) if I use an image tag pointing to an SVG, with the following CSS used:-
#container img {
width: 100%;
max-height: 100%;
}
Where container is a flexible div constraining the size of the SVG (this could be your table cell). The SVG is filling the width of the container, with proportions kept in pro, but if the container gets too wide the max-height kicks in and restricts the height of the SVG as expected without stretching.
How to crop SVG file within HTML/CSS
Crop
You can crop the image by using negative margins and fixing the size of the parent element:
CSS Display an Image Resized and Cropped
BUT THIS IS AN SVG!
Not only can you display an svg directly in html:
<svg viewBox="0 0 100 100" height="150px" width="150px"> <rect x="10" y="10" rx="5" width="80" height="80" fill="pink" stroke="green" stroke-width="5"/></svg>
SVG viewbox overflow: hidden / crop
You can use the rectangle as a <clipPath>
:
<defs>
<rect id="rect" width="100%" height="100%" fill="none" stroke="blue" />
<clipPath id="clip">
<use xlink:href="#rect"/>
</clipPath>
</defs>
and then apply it to a <g>
element which contains your text (and anything else you want to clip:
<g clip-path="url(#clip)">
<text y="10" x="10%" width="10%" height="200%" fill="#000" font-size="30">Only the part inside the viewBox should be visible</text>
</g>
Since the <rect>
was used only to shape the clipPath
, you have to redraw it:
<use xlink:href="#rect"/>
Updated fiddle
Scale element to parent height, keeping its ratio, but keep its position relative
The simplest option is probably to use display: flex
and use background-image
for the SVG.
.heading { display: flex;}
.heading h1 { margin: 0;}
.heading .img { flex: 1 1 auto; background: url(https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/obama.svg) no-repeat;}
<div class="heading"> <h1>HEADLINE</h1> <div class="img"></div></div>
<br/><br/><br/>
<div class="heading"> <h1>WRAPPED<br/>HEADLINE</h1> <div class="img"></div></div>
Related Topics
Share Style Across Web Components "Of The Same Type"
How to Make The HTML Link Activated by Clicking on The <Li>
Why Don't Svg Images Scale Using The CSS "Width" Property
Twitter Bootstrap Tabs Not Working: When I Click on Them Nothing Happens
Disable HTML Escaping in Django's Textfield
Table Columns, Setting Both Min and Max Width with CSS
Table's Border-Radius Does Not Function as Expected
CSS: Responsive Way to Center a Fluid Div (Without Px Width) While Limiting The Maximum Width
After Pseudo Element Not Appearing in Code
Replace Characters with HTML Entities in Java
Apply Different CSS Stylesheet Depending on Browser Window Size - I Can't Find Anything Definitive
Unicode Character as Bullet for List-Item in CSS
How to Make a Text Input Non-Editable