I'm embedding a SVG with a width of 100% and automatic height. The maximum height is 80% of the viewport.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style>
html, body{
width: 100%;
height: 100%;
}
img{
width: 100%;
height: auto;
max-height: 80vh;
}
</style>
</head>
<body>
<img src="example.svg">
</body>
</html>
If the SVG doesn't fit into the 80% of the viewport it'll be cropped by the specified maximum height. The problem is that this also centeres the SVG:
What I need is to keep the embedding via <img> as this is what I receive from a CMS and position the SVG to the left like a background-position: left top; would do. How to position the <img> contents to the left, even if the image is cropped?
Try to add preserveAspectRatio="xMinYMin meet" to root svg element of your svg file, like this.
<svg width="200px" height="200px"
viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMinYMin meet">
<rect width="100%" height="100%" fill="red"/>
</svg>
Have you tried doing:
float:left;
Related
I am working on svg image (as shown in the screenshot marked by an arrow having four triangles) html code as show below belonging to the webpage in which I want to increase the height of it.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
<style>.path-one,.path-two{fill-rule:evenodd;clip-rule:evenodd;fill:#00afc9}.path-two{opacity:.4;fill:#93c83d}</style>
<path class="path-one" d="M30 30H0V0"></path>
<path class="path-two" d="M0 30V0h30"></path>
</svg>
I tried adding inline width="150px" and height="150px" in svg tag but it doesn't seem to work.
Problem Statement:
I am wondering what changes I should make in the code above so that the height of the svg image gets changed
You can achieve the same result using CSS and it will be easier to handle:
.box {
display:inline-block;
width:150px;
height:150px;
background:
linear-gradient(to top left ,transparent 49.3%,rgb(147, 200, 61,0.4) 50%),
linear-gradient(to bottom left,transparent 49.3%,#00afc9 50%);
}
<div class="box">
</div>
You can also integrate it as background for your black bar:
.box {
height:60px;
background:
linear-gradient(to top left ,transparent 49.3%,rgb(147, 200, 61,0.4) 50%),
linear-gradient(to bottom left,transparent 49.3%,#00afc9 50%),
#000;
background-size:60px 100%;
background-repeat:no-repeat;
}
<div class="box">
</div>
apply it on the svg element:
svg { width: 150px; height: 150px }
Please note that, the svg image is actually taking the height and width that you want to set by using height and width properties only. The problem however lies in you paths. You can add a background-color to svg element to verify that it actually is changing the height and width.
<svg xmlns="http://www.w3.org/2000/svg" height="300" width="150"
viewBox="0 0 30
30" enable-background="new 0 0 311.7 311.5">
<path fill="red" class="path-one" d="M30 30H0V0"></path>
<path fill="blue" class="path-two" d="M0 30V0h30"></path>
</svg>
<!-- CSS Code-->
<style>
svg {
background-color: black;
}
</style>
A handly website to quickly play around SVG images is :
https://www.rapidtables.com/web/tools/svg-viewer-editor.html
Make good use of it.
Is there a way to make the svg automatically scale to the size of the circle inside it? Something like or something. At the moment I give the svg a size, and the circle a size. Which causes them to not match (and I don't want to manually try and match both every time).
See how the blue background is bigger than the circle. I know I can just change the height and width, but it would be nice to have this change according to the circle size. I only want to change one element, not match both.
.divOrangeCircles {
display: inline-block;
background-color: aqua;
opacity: 0.5;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<div class="divOrangeCircles"><svg height="200" width="200"><circle cx="90" cy="90" r="90" fill="#F48043"/></svg></div>
</body>
</html>
What you want is the viewBox='x y width height' attribute, which will define the view-box of your SVG drawings.
SVG units are (generally) relative to their parent's box, by setting the viewBox attribute, you define how much of this units your SVG should display.
.divOrangeCircles {
display: inline-block;
background-color: aqua;
opacity: 0.5;
}
svg {
display: block;
}
<div class="divOrangeCircles">
<svg viewBox="0 0 180 180" height="200" width="200">
<circle cx="90" cy="90" r="90" fill="#F48043"/>
</svg>
</div>
If you want to svg scale according to parent div then use this code. Don't be add manually dimensions in percentage.
.divOrangeCircles svg{
width: 100%;
height: 100%;
}
Give your cx, cy and r should be in percentages in order to modify according to the Parent svg size.
Sample Fiddle
For controlling sizes from css u can make svg height and width as 100% and give size from css.
<div class="divOrangeCircles"><svg height="100%" width="100%"><circle cx="50%" cy="50%" r="50%" fill="#F48043"/></svg></div>
Updated Fiddle
Help :)
Is it possible to emulate the following CSS in an SVG fill?
background-image: url(/* URL */);
background-position: 50%;
background-size: auto 100%;
background-repeat: repeat-x;
i.e. A background image that has its aspect ratio preserved, has the same height as its container, is centred, and repeats horizontally. This JSBin demonstrates the behaviour I'm trying to implement, using an animation to show how the background responds to height changes.
It's awkward, to say the least, and it is far from perfect. As the outermost element, I have set a html <div> element, but it could also be a <svg> element. The key point is to remember that you need an inner <svg> with overflow: visible, and an outer element with overflow: hidden (which would be the default for an <svg> element.
#keyframes shrink {
0% { height: 200px; }
100% { height: 50px; }
}
div {
animation: 2s ease-in-out 0s infinite alternate shrink;
border: 1px solid #000;
height: 200px;
width: 200px;
overflow: hidden;
}
<div>
<svg width="100%" height="100%" viewBox="-0.675 0 0.1 1"
preserveAspectRatio="xMidYMid meet" overflow="visible">
<pattern id="p1" viewBox="0 0 100 80" height="1" width="1.25"
patternUnits="userSpaceOnUse">
<image xlink:href="http://static.jsbin.com/images/dave.min.svg"
width="100" height="80" />
<rect width="100" height="80" fill="none" stroke="brown" />
</pattern>
<rect fill="url(#p1)" x="-500" y="0" width="1000" height="1" />
</svg>
</div>
The repetitions are not conceptually endless, but merely very long - I've set 1000 / 1.
If the container is higher than wide in respect to the aspect ratio of the svg viewBox, the image will only scale so far that the viewBox still fits inside. This is due to the meet keyword being always applied for both directions. Therefore, the viewBox width needs to be small - I've set 1 / 10.
The size of the image needs to be known in advance, and it must be used in four places:
The <image> width and height must be explicitely set, SVG has no notion of "natural size".
The <pattern> viewBox attribute must be set to the image size. I've added a rectangle to illustrate the image borders.
While the pattern height attribute always needs to be 1, the width has to be set to the correct apect ratio.
If the viewBox on the on the inner <svg> has a value of "x 0 ws 1", and wp is the pattern width, then x = -(wp/2 + ws) - for my example, ws=0.1, wp=1.25 => x=-0.675.
I have an HTML element that I clip using a path in an external SVG, which makes for a setup like this:
CSS:
video {
clip-path: url(path.svg#clip)
}
HTML:
<html>
<body>
<video src="foo.png" width="480" height="150" />
</body>
</html>
SVG:
<svg width="480px" height="92px" viewBox="0 0 480 92">
<defs>
<clipPath id="clip">
<path d="…"></path>
<path d="…"></path>
<path d="…"></path>
</clipPath>
</svg>
Note that the image I want to clip is slightly higher than the path that clips it. How can I position the image's position to change which region is visible?
I have solved the problem by wrapping the <video> inside another container and applying the mask to it. The container is positioned relatively and using absolute positioning i can then move the video around inside it.
CSS:
.container {
position: relative;
width: 480px;
height: 150px;
overflow: hidden;
clip-path: url(path.svg#clip)
}
.container video {
position: absolute;
/* … */
}
HTML:
<html>
<body>
<div class="container">
<video src="foo.png" width="480" height="150" />
</div>
</body>
</html>
I have a SVG-element with a lot of elements inside. The SVG-element has a viewbox, so you can press a zoom-button and the elements appear bigger or smaller. Works well. Now the problem is, when the elements overflow the parent SVG-element no ScrollBars appear.
Example:
<div width="100%" height="100%">
<svg height="100%" width="100%" style="overflow-x: auto; overflow-y: auto; "viewBox="0 0 793 1122">
<g>
...
<line y2="44.9792mm" y1="44.9792mm" x1="197.203mm" x2="12.7028mm"></line>
<line y2="44.9792mm" y1="44.9792mm" x1="197.203mm" x2="12.7028mm"></line>
<text x="43.4516mm" y="52.9167mm" style="font-size: 11pt;">S</text>
<rect x="0" width="210mm" y="0" height="297mm"></rect>
...
</g>
</svg>
</div>
//here I set the viewbox after clicking the zoomOut-Button
float width = svg.getViewBox().getBaseVal().getWidth();
float height = svg.getViewBox().getBaseVal().getHeight();
svg.getViewBox().getBaseVal().setHeight((float) (height / 0.9));
svg.getViewBox().getBaseVal().setWidth((float) (width / 0.9));
Can someone help me?
I put the overflow attribut in the svg and also in the div tag. doesn't work.
Try making the SVG element bigger than the div, and let the div handle the overflow using scroll.
For example, see this jsfiddle, which utilizes the following css:
div#container {
height: 400px;
width: 400px;
border:2px solid #000;
overflow: scroll;
}
svg#sky {
height: 100px;
width: 1100px;
border:1px dotted #ccc;
background-color: #ccc;
}
Part of the point of SVG is so that it can scale to fit the screen. However, I think if you want to get something like what you are describing, then you need to set explicit width and height to the svg element. Something like http://jsfiddle.net/qTFxJ/13/ where I set the width and height in pixels to match your viewBox size.