SVG oversized on load until CSS kicks in - html
I have a SVG inside a fixed-size div (width: 350px; height: 400px;) and everything is fine once the page loads, but during the loading, the SVG is oversized and mangled up until CSS kicks in:
Here is the code, HTML first:
<div class="dashboard-tasks-completed">
<figure>
<svg width="100%" height="100%" viewBox="0 0 42 42" class="donut">
<circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
<circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#19222a" stroke-width="5"></circle>
<circle id="active" class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#206996" stroke-width="5" stroke-dasharray="66.66666666666666 33.33333333333333" stroke-dashoffset="25"></circle>
<circle id="completed" class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#B8E1FA" stroke-width="5" stroke-dasharray="33.33333333333333 66.66666666666666" stroke-dashoffset="58.33333333333334"></circle>
<g class="chart-text">
<text x="50%" y="50%" class="chart-number">3</text>
<text x="50%" y="50%" class="chart-label"> Tasks </text>
</g>
</svg>
<figcaption class="figure-key">
<ul class="figure-key-list" aria-hidden="true" role="presentation">
<li>
<span class="shape-circle shape-blue"></span>2 Active (66.67%)
</li>
<li>
<span class="shape-circle shape-lightblue"></span>1 Completed (33.33%)
</li>
</ul>
</figcaption>
</figure>
</div>
CSS:
.dashboard-tasks-completed {
width: 350px;
height: 400px;
}
.chart-text {
font: 16px/1.4em "Montserrat", Arial, sans-serif;
fill: #000;
transform: translateY(0.25em);
}
.chart-number {
font-size: 0.6em;
line-height: 1;
text-anchor: middle;
transform: translateY(-0.25em);
}
.chart-label {
font-size: 0.2em;
font-weight: bold;
text-transform: uppercase;
text-anchor: middle;
transform: translateY(0.7em);
}
.figure-key-list {
list-style: none;
}
.figure-key-list li {
margin: 0 0 8px;
font-size: 14px;
}
.shape-circle {
display: inline-block;
vertical-align: middle;
width: 32px;
height: 32px;
border-radius: 50%;
margin-right: 10px;
}
.shape-blue { background-color: #206996; }
.shape-lightblue { background-color: #B8E1FA }
I have created a minimal example, unfortunately it is not reproducible in neither JSFiddle or Codepen, but here is the demo in any case.
How can I overcome the issue?
As others have said, you are letting the SVG fill the page until the CSS loads and it becomes the correct size.
If you know your SVG is going to be width: 350px; height: 400px;, then you could set those dimensions on the SVG instead.
<svg width="350px" height="400px" ...>
Then put it back to what you want in the CSS.
.dashboard-tasks-completed svg {
width: 100%;
height: 100%;
}
Or you could inline some basic styling in your document, that would set up some important sizes until the rest of the SVG loads.
<head>
<style>
.dashboard-tasks-completed {
width: 350px;
height: 400px;
}
.chart-text {
font: 16px/1.4em "Montserrat", Arial, sans-serif;
fill: #000;
transform: translateY(0.25em);
}
</style>
...
And if your font size never changes, then why not just set those attributes on your <text> element instead of using CSS?
<g class="chart-text" style="font: 16px/1.4em "Montserrat", Arial, sans-serif; fill: #000; transform: translateY(0.25em);">
One option is to hide the div (or other elements within) initially and then reveal it after the page finishes loading.
For example, modify your div thusly:
<div id="showme" class="dashboard-tasks-completed" style="display:none;">
And then add the following javascript:
window.onload = function () {
document.getElementById("showme").style.display = "block";
};
The inline CSS display:none; lets the browser know not to display it, even before external CSS is loaded. Once everything is loaded, your onload event will fire, and the javascript above will display the previously-hidden elements.
The viewBox attribute defines the position and dimension, in user space, of an SVG viewport.
The value of the viewBox attribute is a list of four numbers min-x, min-y, width and height, separated by whitespace and/or a comma, which specify a rectangle in user space which is mapped to the bounds of the viewport established for the associated SVG element (not the browser viewport).
Taken from MDN.
The viewbox property defines the region of an svg element which should be zoomed in on to fit inside it's container. However, the element will keep it's aspect ratio and not stretch to fit inside the container.
So in your case, this means that the svg element will fill all it's parents space while maintaining it's aspect ratio, until css arrives and tells it to size it self inside a 350px by 400px space.
Related
Justify the text inside a grid
I'm trying to justify my text inside a grid on cargo collective. Till now I couldn't do that and I had to export a svg for each title and place it as an image (like in this page: https://gracegloriadenis.com/IN-FROM-AND-WITH)
But right now the text would be afftected by a dark mode toggle and a svg won't be affected at all so I'll have to find a solution to justify the text in the div (as in "In, From and With" the title of the page I've just shared with you)
This is my code:
<div grid-col="x12" grid-pad="0" class=""><h1>CIVITONIA</h1>
Civitonia is the title that should be justified and it should touch both sides of the div always. Doing that I'd like not to have a size for the text (ex: font size:45rem;) but to have the text as big as the container. Is it possible?
Doing that it would be a lot easier even to have a responsive version of it, as the box would be smaller in the mobile and the text would follow it.
This is the script I'm using for the dark mode:
the script
<button onclick="myFunction()">Dark Mode</button>
<script>
function myFunction() {
var element = document.body;
element.classList.toggle("dark-mode");
}
</script>
CSS related to it:
.dark-mode {
background-color: black!important;
color: #d9ff76!important;
}
.dark-mode button {
color: black!important;
background-color: #d9ff76;
padding: 5px 5px 5px 5px;
border-radius: 15px;
border: solid 1px #000000;
cursor: pointer;
position: absolute;
bottom: 10px;
}
Best you're going to get with just CSS (which is pretty close) is using clamp for font size, use like:
font-size: clamp(<min value>, <preferred value>, <max value>);
Then you set "min value" to 0px and set "max value" to 1000px (a value that will never be reached). The preferred value will need some tweaking based on the font family used and the amount of characters -- so you will have to do it on a per instance basis. I've set the below example up using CSS custom properties (variables) to make it a bit easier, all you have to do is set --clampFontSize: <prefered-value> on an element (preferably in vw units (viewport width))
body { line-height: 1; margin: 0 } h1 { margin: 0 }
.clampText h1 {
font-size: clamp(0px, var(--clampFontSize, 1vw), 1000px);
text-align: center
}
<div class="clampText" style="--clampFontSize: 17.5vw">
<h1>CIVITONIA</h1>
</div>
<div class="clampText" style="--clampFontSize: 12vw">
<h1>In, from, <em>and</em> with</h1>
</div>
Otherwise, if you put your SVG inline then you can control the color on the fly with CSS — the example will have a dark gradient background and white svg color if dark mode is on. Else it will have a light gradient background and black svg color if dark more is off
Note each <path> is set to fill: currentColor in the CSS, this is to inherit the path fill color from the parent <svg> which is inheriting the color from #colorOuterSVG — sometimes paths shouldn’t be filled though and instead have a stroke, or sometimes it’s a circle or something else. So the CSS may need to be adapted to your needs.
The gradients and button color are setup using CSS Custom Properties (variables)
:root {
--gradient1: #fca5a5, #fcd34d, #bef264, #6ee7b7, #67e8f9; /* Body */
--gradient2: #f0abfc, #c4b5fd, #93c5fd, #67e8f9, #6ee7b7; /* SVG Container */
--color: black; --contrast: white;
--darkOn: none; --darkOff: block;
}
:root.dark-mode {
--gradient1: #991b1b, #92400e, #3f6212, #065f46, #155e75; /* Body */
--gradient2: #86198f, #5b21b6, #1e40af, #155e75, #065f46; /* SVG Container */
--color: white; --contrast: black;
--darkOn: block; --darkOff: none;
}
body { background: linear-gradient(60deg, var(--gradient1)) no-repeat }
.darkModeOn { display: var(--darkOn) }
.darkModeOff { display: var(--darkOff) }
button {
background-color: var(--contrast);
border: 1px solid currentColor;
border-radius: 0.375em;
color: var(--color);
cursor: pointer;
display: inline-flex;
align-items: center;
margin-bottom: 8px;
padding: .5em 1em;
}
button span { margin-right: .25em }
.colorOuterSVG {
background: linear-gradient(60deg, var(--gradient2)) no-repeat;
border: 1px solid currentColor;
border-radius: 0.375em;
color: var(--color);
padding: 0.5em
}
.colorSVG { display: block }
.colorSVG path { fill: currentColor }
<button onclick="document.documentElement.classList.toggle('dark-mode')"><span class="darkModeOn">Disable</span><span class="darkModeOff">Enable</span>Dark Mode</button>
<div class="colorOuterSVG">
<svg class="colorSVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 1920 239.3" style="enable-background:new 0 0 1920 239.3;" xml:space="preserve">
<g>
<path d="M20.5,165.3V41.5c0-9.6-6.3-14.4-19-14.4c-1,0-1.5-1.6-1.5-4.8c0-3.2,0.5-4.8,1.5-4.8c3,0.4,11.9,0.6,26.6,0.6 s23.5-0.2,26.6-0.6c0.8,0,1.3,1.6,1.3,4.8c0,3.2-0.4,4.8-1.3,4.8c-7,0-11.8,1-14.3,3.1c-2.5,2.1-3.8,5.9-3.8,11.3v123.8 c0,9.8,6,14.7,18.1,14.7c0.8,0,1.3,1.6,1.3,4.8c0,3.2-0.4,4.8-1.3,4.8c-5.8-0.6-14.5-0.9-26.1-0.9c-11.6,0-20.3,0.3-26.1,0.9 c-0.8,0-1.3-1.6-1.3-4.8c0-3.2,0.4-4.8,1.3-4.8C14.5,180,20.5,175.1,20.5,165.3z"/>
<path d="M87.6,165.3v-116c0-8.5-1.5-14.3-4.6-17.5c-3.1-3.2-7.8-4.8-14.4-4.8c-0.8,0-1.3-1.6-1.3-4.8c0-3.2,0.4-4.8,1.3-4.8 c2.9,0.4,7.9,0.6,14.9,0.6c7,0,11.6,0.3,13.8,0.9c2.2,0.6,4.1,2.4,5.9,5.2L179.6,147c0.7,1.1,1.5,1.6,2.4,1.6 c1.5,0,2.3-1.4,2.3-4.1V41.7c0-9.7-5.7-14.6-17.2-14.6c-0.9,0-1.4-1.6-1.4-4.8c0-3.2,0.5-4.8,1.4-4.8c3.1,0.4,9.4,0.6,18.9,0.6 c9.5,0,15.8-0.2,18.8-0.6c0.9,0,1.4,1.6,1.4,4.8c0,3.2-0.5,4.8-1.4,4.8c-9,0-13.6,4.9-13.6,14.6V185c0,4.2-0.6,6.3-1.8,6.3 c-1.2,0-2.6-1.3-4.3-3.8l-87-137.5c-0.8-1.1-1.5-1.6-2.3-1.6c-0.8,0-1.1,0.8-1.1,2.3v114.6c0,9.8,5.4,14.7,16.1,14.7 c0.8,0,1.3,1.6,1.3,4.8c0,3.2-0.4,4.8-1.3,4.8c-5.4-0.6-12.1-0.9-19.9-0.9c-7.8,0-14.5,0.3-20,0.9c-0.9,0-1.4-1.6-1.4-4.8 c0-3.2,0.5-4.8,1.4-4.8C82,180,87.6,175.1,87.6,165.3z"/>
<path d="M234.3,159.1c5.3,0,9.7,2.8,13.3,8.5c3,4.8,4.5,10.2,4.5,16.2c0,13-4.2,25.2-12.7,36.5c-4.7,6.3-9.9,11.2-15.6,14.7 c-0.1,0.2-0.2,0.3-0.4,0.3c-1.8,0-2.6-1.1-2.6-3.4c0-0.3,0-0.6,0.1-0.8l9.5-12.8c4.9-7.7,7.4-15.2,7.4-22.5c0-4.1-1.2-6.7-3.5-7.7 c-7.8-3.8-11.7-9.4-11.7-17c0-4.9,1.8-8.4,5.5-10.5C230,159.6,232,159.1,234.3,159.1z"/>
<path d="M346.2,165.3V41.5c0-9.2-6.3-13.8-18.8-13.8c-0.9,0-1.4-1.6-1.4-4.8c0-3.2,0.5-4.8,1.4-4.8c7.8,0.4,17.5,0.6,29,0.6 c11.6,0,22.6-0.1,33.3-0.3c10.6-0.2,21.7-0.3,33.3-0.3c4.7,0.1,7.1,0.9,7.3,2.4v41.3c0,1.5-1.3,2.3-3.8,2.3c-2.5,0-3.8-0.8-3.8-2.3 c0-21.3-8.7-32.3-26.1-32.9l-30.1-1.3c-2.8,0-4.1,1.7-4.1,5.1v62c0,2.6,0.9,3.9,2.8,3.9h16.4c5,0,8.2-1.3,9.7-3.8 c1.4-2.5,2.1-6.7,2.1-12.6V67.8c0-1.1,1.2-1.6,3.5-1.6c2.3,0,3.5,0.5,3.5,1.6c-0.5,5.9-0.8,17.7-0.8,35.6c0,17.9,0.3,29.8,0.8,35.7 c0,1.1-1.2,1.6-3.5,1.6c-2.3,0-3.5-0.5-3.5-1.6v-14.7c0-5.9-0.8-10-2.5-12.4c-1.7-2.4-4.8-3.6-9.3-3.6h-16.7c-1.7,0-2.5,1-2.5,3.1 v53.9c0,9.8,6.3,14.7,18.8,14.7c0.9,0,1.4,1.6,1.4,4.8c0,3.2-0.5,4.8-1.4,4.8c-5.9-0.6-14.8-0.9-26.6-0.9s-20.6,0.3-26.4,0.9 c-0.9,0-1.4-1.6-1.4-4.8c0-3.2,0.5-4.8,1.4-4.8C340.2,180,346.2,175.1,346.2,165.3z"/>
<path d="M463.7,165.3V41.5c0-9.2-6.3-13.8-19-13.8c-1,0-1.5-1.6-1.5-4.8c0-3.2,0.5-4.8,1.5-4.8c7.7,0.4,14.8,0.6,21.3,0.6 c6.5,0,13-0.1,19.4-0.3c6.4-0.2,11.7-0.3,15.7-0.3c15.4,0,27.5,4,36.3,12.1c8.8,8.1,13.2,19.7,13.2,34.8c0,23.2-9,37.8-26.9,43.7 c-1.8,0.7-1.8,3.1,0,7.2c9.7,21.5,21.7,40.7,36,57.6c7.4,8.8,13.7,13.2,18.7,13.2c0.9,0,1.4,0.7,1.4,2.2s-0.5,2.2-1.4,2.3 c-2.8,0.3-5,0.5-6.7,0.5c-11,0-19-2.3-24.2-6.8c-8.2-7.1-15.3-15.6-21.2-25.4l-17.6-32.1c-3.2-5.9-5.7-9.7-7.5-11.3 c-1.8-1.6-4.6-2.4-8.4-2.4c-3.7,0-6.6-0.1-8.6-0.4c-2-0.3-3.3-0.2-3.8,0.3s-0.8,1.3-0.8,2.3v49.3c0,9.8,6.5,14.7,19.5,14.7 c0.8,0,1.3,1.6,1.3,4.8c0,3.2-0.4,4.8-1.3,4.8c-5.2-0.6-14.1-0.9-26.9-0.9c-12.7,0-21.6,0.3-26.7,0.9c-0.9,0-1.4-1.6-1.4-4.7 s0.5-4.7,1.4-4.8C457.7,180,463.7,175.1,463.7,165.3z M479.8,100.2c0,2.6,1.3,4.2,3.8,4.9c2.5,0.7,6.1,1,10.8,1 c25.9,0,38.8-13.6,38.8-40.9c0-11-3.5-20.2-10.5-27.8c-7-7.6-16.7-11.4-29.1-11.4h-9c-3.1,0-4.6,1.3-4.6,3.9V100.2z"/>
<path d="M586.8,104.9c0-22,5.9-42.5,17.6-61.6c11.8-19,27.6-28.6,47.5-28.6c17.8,0,33,8.7,45.6,26.1c12.6,17.4,18.9,38.9,18.9,64.5 c0,21.4-5.8,41.2-17.5,59.4c-11.6,18.2-27.5,27.2-47.6,27.2c-19.4,0-35.1-8.6-46.9-25.7C592.7,149.2,586.8,128.7,586.8,104.9z M606,97.5c0,26,5,46.6,15,62c10,15.4,20.6,23.1,31.8,23.1c14.2,0,25.2-7.2,33-21.7c7.7-14.5,11.6-32.3,11.6-53.5 c0-23.4-4.9-43.2-14.6-59.4c-9.8-16.2-20.4-24.4-32.1-24.4c-14.1,0-25,7.6-32.9,22.7C609.9,61.6,606,78.6,606,97.5z"/>
<path d="M747.1,165.3l6-118.5c0.4-9-2.4-15-8.4-17.8c-2.7-1.3-6.2-1.9-10.7-1.9c-0.9,0-1.4-1.6-1.4-4.8c0-3.2,0.5-4.8,1.4-4.8 c3,0.4,8,0.6,15,0.6c7,0,11.6,0.6,13.7,1.9c2.1,1.3,3.8,3.7,5.1,7.2l47.5,126.6c0.8,2.3,1.5,3.4,2.1,3.4c0.7,0,1.5-1.2,2.4-3.6 l48.7-127.1c1.4-3.8,3.3-6.2,5.6-7.1c2.3-0.9,6.7-1.3,13.3-1.3c6.6,0,11.4-0.2,14.6-0.6c0.9,0,1.4,1.6,1.4,4.8 c0,3.2-0.5,4.8-1.4,4.8c-8.6,0-14.2,2.9-16.8,8.8c-1.4,3.4-2.1,8.1-2,13.9l0.6,115.5c0.1,9.8,5.4,14.7,15.9,14.7 c1,0,1.5,1.6,1.5,4.8c0,3.2-0.5,4.8-1.5,4.8c-5-0.6-12.7-0.9-23-0.9s-18.3,0.3-24,0.9c-0.9,0-1.4-1.6-1.4-4.8 c0-3.2,0.5-4.8,1.4-4.8c10,0,15-4.9,14.9-14.7l-0.4-107.1c0-1.1-0.3-1.6-0.9-1.6c-0.6,0-1.1,0.5-1.5,1.5l-50.7,131.3 c-0.6,1.4-1.3,2.1-2.3,2.1c-0.9,0-1.6-0.7-2.1-2.1L763.2,58c-0.5-1.4-1-2.1-1.6-2.1c-0.6,0-0.9,0.7-1,2.1l-5.1,107.4 c-0.5,9.8,4.8,14.7,15.8,14.7c1,0,1.5,1.6,1.5,4.8c0,3.2-0.5,4.8-1.5,4.8c-5.4-0.6-11.9-0.9-19.7-0.9s-14.5,0.3-20.1,0.9 c-0.9,0-1.4-1.6-1.4-4.8c0-3.2,0.5-4.8,1.4-4.8C741.5,180,746.7,175.1,747.1,165.3z"/>
<path d="M933.6,159.1c5.3,0,9.7,2.8,13.3,8.5c3,4.8,4.5,10.2,4.5,16.2c0,13-4.2,25.2-12.7,36.5c-4.7,6.3-9.9,11.2-15.6,14.7 c-0.1,0.2-0.2,0.3-0.4,0.3c-1.8,0-2.6-1.1-2.6-3.4c0-0.3,0-0.6,0.1-0.8l9.5-12.8c4.9-7.7,7.4-15.2,7.4-22.5c0-4.1-1.2-6.7-3.5-7.7 c-7.8-3.8-11.7-9.4-11.7-17c0-4.9,1.8-8.4,5.5-10.5C929.3,159.6,931.3,159.1,933.6,159.1z"/>
<path d="M1087.5,163.2c-0.7,2.9-1,5.4-1,7.4c0,3.4,1.1,5.1,3.3,5.1c2.2,0,6.5-3.9,13.1-11.8c0.6-0.8,1.5-0.3,2.8,1.4 c0.9,1.1,1.4,2,1.4,2.8c0,0.4-0.1,0.8-0.3,1c-4.4,6.8-9.3,12.3-14.7,16.6c-5.4,4.3-10,6.4-13.9,6.4c-4.1,0-6.2-3.3-6.2-9.9 c0-4.7,0.8-9.7,2.4-15.1l4.4-14.4l-1.3-0.5c-15.9,26.6-29.4,39.9-40.6,39.9c-4,0-7.1-2-9.2-6c-2.1-4-3.2-9-3.2-15.1 c0-17.7,5.8-36.8,17.5-57.4c11.6-20.6,23.9-30.9,36.9-30.9c4.9,0,9.3,2.3,13.4,7l2.4-8.8c0.5-2,2.7-3,6.7-3c3.9,0,5.7,1,5.1,3 L1087.5,163.2z M1084.9,120.5l4.5-19c-2.8-7-7.2-10.5-13.2-10.5c-9,0-17.4,9.2-25.2,27.6c-7.7,18.4-11.6,34.4-11.6,48 c0,7.9,2,11.8,5.9,11.8c3.7,0,8.9-4.2,15.6-12.6c6.7-8.4,11.9-16.2,15.7-23.4C1080.4,135.2,1083.1,127.9,1084.9,120.5z"/>
<path d="M1188.1,163.2c-0.7,2.8-1,5.4-1,7.8c0,3.3,1.1,4.9,3.5,4.9c2.3,0,6.5-3.9,12.5-11.7c0.2-0.3,0.4-0.4,0.6-0.4 c0.8,0,1.7,0.5,2.4,1.6c0.8,1.1,1.2,1.9,1.2,2.5c0,0.6-0.1,1-0.3,1.1c-10.7,15.3-20.3,23-28.6,23c-3.7,0-5.5-3.5-5.5-10.5 c0-3.3,0.3-6.6,1-10l12.6-55.9c2-8.9,3-14.9,3-18.2c0-3.8-1-5.7-3-5.7c-5.7,0-13.9,9.7-24.5,29c-10.6,19.3-20,41.9-28.3,67.7 c-0.7,2.4-3,3.6-7,3.6c-4,0-5.7-1.4-5.1-4.1l17.7-77.7c0.4-1.8,0.6-3.4,0.6-4.9c0-3.9-1.1-5.9-3.2-5.9c-2.1,0-5.7,3.6-10.7,10.8 c-0.3,0.3-0.5,0.4-0.8,0.4c-0.8,0-1.6-0.5-2.4-1.6c-0.8-1-1.3-1.9-1.3-2.7c0-0.3,0.1-0.6,0.3-0.8c10.3-15.9,19.3-23.9,26.9-23.9 c3.8,0,5.8,3.8,5.8,11.3c0,3.5-1,9.3-2.9,17.3l-6.9,30.3l0.8,0.5c16.5-39.6,31.5-59.4,45.1-59.4c7.1,0,10.7,5.2,10.7,15.7 c0,5.1-0.9,11.8-2.8,20.1L1188.1,163.2z"/>
<path d="M1284,162.4c-0.5,2.4-0.8,4.4-0.8,5.9c0,4.1,0.8,6.2,2.5,6.2c3.4,0,7.9-3.9,13.4-11.8c0.2-0.3,0.7-0.2,1.6,0.3 c0.9,0.4,1.6,1.2,2.1,2.3c0.5,1.1,0.6,1.8,0.4,2.1c-11.6,16.5-20.8,24.7-27.6,24.7c-4,0-6-4.5-6-13.4c0-2.2,0.2-4.5,0.6-6.9l4-22.4 l-1.4-1.4c-6.9,12.5-14,22.9-21.5,31.4c-7.5,8.5-14.5,12.7-21.1,12.7c-4.1,0-7.2-2.2-9.3-6.5c-2.1-4.3-3.1-9.4-3.1-15.1 c0-17.8,5.8-37.1,17.4-57.8c11.6-20.7,23.9-31,37-31c5.4,0,9.8,2.6,13.2,7.9l9.3-51.6c1-5.6,1.5-9.6,1.5-12.1 c0-6.9-2.6-10.3-7.7-10.3c-1,0-1.5-1.1-1.5-3.3c0-2.2,0.5-3.3,1.5-3.3c4.7,0,9.6-1.1,14.9-3.5c5.2-2.3,8-3.5,8.4-3.5 c0.8,0,1.3,0.5,1.3,1.6c0,0.3-0.1,0.8-0.3,1.5L1284,162.4z M1282.9,102.3c-2.9-8.2-7.4-12.3-13.3-12.3c-9,0-17.4,9.3-25.2,28 c-7.7,18.7-11.6,34.7-11.6,48.1c0,8.2,2,12.3,5.9,12.3c4.7,0,11.3-6,20-18.1c8.6-12.1,15.3-23.7,20-34.8L1282.9,102.3z"/>
<path d="M1382,41.5c-3.4-9.6-8.4-14.4-14.8-14.4c-0.8,0-1.3-1.6-1.3-4.8c0-3.2,0.4-4.8,1.3-4.8c3,0.4,10.1,0.6,21.4,0.6 c11.3,0,18.5-0.2,21.7-0.6c0.8,0,1.3,1.6,1.3,4.8c0,3.2-0.4,4.8-1.3,4.8c-7.6,0-11.4,2.4-11.4,7.2c0,2,0.5,4.4,1.5,7.3L1440,152 c0.7,1.6,1.3,2.4,1.8,2.4c0.8,0,1.4-0.9,2-2.6l14.6-39.8c0.5-1.5,0.8-3.1,0.8-4.9c0-1.8-0.3-3.7-1-5.7l-21.5-59.9 c-3.4-9.6-8-14.4-13.7-14.4c-0.9,0-1.4-1.6-1.4-4.8c0-3.2,0.5-4.8,1.4-4.8c2.9,0.4,9.9,0.6,20.8,0.6c11,0,18-0.2,21.1-0.6 c0.8,0,1.3,1.6,1.3,4.8c0,3.2-0.4,4.8-1.3,4.8c-7.5,0-11.3,2.3-11.3,6.9c0,2,0.5,4.5,1.5,7.5l11.7,32.5c0.8,1.9,1.4,2.9,1.9,2.9 c0.6,0,1.3-1,2-3.1l11.3-31.1c1.2-3.1,1.8-5.7,1.8-7.9c0-5.1-3.3-7.7-10-7.7c-1,0-1.5-1.6-1.5-4.8c0-3.2,0.5-4.8,1.5-4.8 c3,0.4,9.3,0.6,19,0.6c9.6,0,16-0.2,19.1-0.6c0.8,0,1.3,1.6,1.3,4.8c0,3.2-0.4,4.8-1.3,4.8c-10,0-16.3,3.6-19,10.8l-17.6,48.7 c-0.7,2.1-1,4-1,5.8c0,1.3,0.2,2.7,0.6,4l20,55.6c0.7,1.6,1.3,2.4,1.9,2.4c0.7,0,1.3-0.9,1.8-2.6l39.8-109.1 c1.2-3.1,1.8-5.7,1.8-7.8c0-5.2-3.3-7.8-10-7.8c-0.8,0-1.3-1.6-1.3-4.8c0-3.2,0.4-4.8,1.3-4.8c3.2,0.4,9.2,0.6,18.1,0.6 s14.9-0.2,18-0.6c0.9,0,1.4,1.6,1.4,4.8c0,3.2-0.5,4.8-1.4,4.8c-8.7,0-14.4,3.6-17.1,10.8l-54.4,149.9c-1.2,3-2.1,4.5-2.8,4.5 c-0.8,0-1.6-1.5-2.6-4.4l-23-64.3c-0.5-1.3-1-2-1.6-2c-0.5,0-1,0.7-1.5,2l-23.2,64.3c-1,2.9-1.9,4.4-2.8,4.4 c-0.6,0-1.5-1.5-2.6-4.4L1382,41.5z"/>
<path d="M1589,165.3V41.5c0-9.6-6.3-14.4-19-14.4c-1,0-1.5-1.6-1.5-4.8c0-3.2,0.5-4.8,1.5-4.8c3,0.4,11.9,0.6,26.6,0.6 s23.5-0.2,26.6-0.6c0.8,0,1.3,1.6,1.3,4.8c0,3.2-0.4,4.8-1.3,4.8c-7,0-11.8,1-14.3,3.1c-2.5,2.1-3.8,5.9-3.8,11.3v123.8 c0,9.8,6,14.7,18.1,14.7c0.8,0,1.3,1.6,1.3,4.8c0,3.2-0.4,4.8-1.3,4.8c-5.8-0.6-14.5-0.9-26.1-0.9c-11.6,0-20.3,0.3-26.1,0.9 c-0.8,0-1.3-1.6-1.3-4.8c0-3.2,0.4-4.8,1.3-4.8C1583,180,1589,175.1,1589,165.3z"/>
<path d="M1688.2,165.3V33.5c0-3.8-1.6-5.8-4.9-5.8h-15.2c-17.7,0-26.6,11.6-26.6,34.7c0,1.2-1.3,1.8-3.8,1.8 c-2.6,0-3.8-0.6-3.8-1.8V22.3c0-2.8,2.6-4.1,7.8-4.1c6.8,0,15.6,0.1,26.6,0.3c10.9,0.2,20.3,0.3,28.1,0.3c7.8,0,17.1-0.1,27.9-0.3 c10.8-0.2,20-0.3,27.6-0.3c5.3,0,7.9,1.4,7.9,4.1v40.1c0,1.2-1.3,1.8-3.8,1.8c-2.6,0-3.8-0.6-3.8-1.8c0-23.1-8.8-34.7-26.4-34.7 h-16.2c-3.4,0-5.1,1.9-5.1,5.8v131.8c0,9.8,6.3,14.7,19,14.7c0.9,0,1.4,1.6,1.4,4.8c0,3.2-0.5,4.8-1.4,4.8 c-6.2-0.6-15.3-0.9-27.4-0.9c-12.1,0-21.2,0.3-27.4,0.9c-0.9,0-1.4-1.6-1.4-4.8c0-3.2,0.5-4.8,1.4-4.8 C1681.6,180,1688.2,175.1,1688.2,165.3z"/>
<path d="M1900.7,165.3c0,9.8,6,14.7,18.1,14.7c0.8,0,1.3,1.6,1.3,4.8c0,3.2-0.4,4.8-1.3,4.8c-10.7-0.6-19.4-0.9-26.1-0.9 c-6.7,0-15.4,0.3-26,0.9c-0.8,0-1.3-1.6-1.3-4.7s0.4-4.7,1.3-4.8c12,0,18-4.9,18-14.7v-54.6c0-3.2-1.3-4.8-3.9-4.8h-70.6 c-2.6,0-3.9,1.6-3.9,4.8v54.6c0,9.8,6,14.7,18.1,14.7c0.8,0,1.3,1.6,1.3,4.8c0,3.2-0.4,4.8-1.3,4.8c-10-0.6-18.5-0.9-25.5-0.9 c-7,0-15.9,0.3-26.6,0.9c-0.8,0-1.3-1.6-1.3-4.7s0.4-4.7,1.3-4.8c12,0,18-4.9,18-14.7V41.5c0-9.6-6.3-14.4-19-14.4 c-1,0-1.5-1.6-1.5-4.8c0-3.2,0.5-4.8,1.5-4.8c3,0.4,11.9,0.6,26.6,0.6s23.5-0.2,26.6-0.6c0.8,0,1.3,1.6,1.3,4.8 c0,3.2-0.4,4.8-1.3,4.8c-12.1,0-18.1,4.8-18.1,14.4v49c0,3.3,1.3,4.9,3.9,4.9h70.6c2.6,0,3.9-1.6,3.9-4.9v-49 c0-9.6-6.3-14.4-19-14.4c-1,0-1.5-1.6-1.5-4.8c0-3.2,0.5-4.8,1.5-4.8c3,0.4,11.9,0.6,26.6,0.6c14.7,0,23.5-0.2,26.6-0.6 c0.8,0,1.3,1.6,1.3,4.8c0,3.2-0.4,4.8-1.3,4.8c-12.1,0-18.1,4.8-18.1,14.4V165.3z"/>
</g>
</svg>
</div>
Display Icon to left of Title & Text with Flex
I'm trying to create a type of 'blurb' with SVG icon with Title & Text using Flex. I have attached a visual example to show you what I'm trying to achieve.
I feel close, but what I've got so far is still kinda sketchy, and I'm struggling to get the exact output. Any advice to point me in the right direction would be appercaited. Thanks
EDIT: How do you reduce the space between H3 & P tags? (I did try margin & padding, yet it didn't have any effect)
Link to CodePen
HTML
<div class="blurb-container">
<div class="blurb-icon">
<svg width="99px" height="89px" viewBox="0 0 99 89" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Homepage---Desktop---First-Time-Visitor" transform="translate(-780.000000, -859.000000)">
<g id="Group-6" transform="translate(180.000000, 828.000000)">
<g id="home-icon-1-copy" transform="translate(600.000000, 31.000000)">
<path d="M22.150176,37.2957114 L58.414244,16.7220133 C60.8963066,15.3138644 63.9757833,15.5045087 66.2652073,17.2080509 L95.4458727,38.9211515 C97.7262512,40.617963 98.7949315,43.4975614 98.1736475,46.2712415 L89.8690907,83.346375 C89.1324698,86.6349692 86.2132711,88.9726247 82.8431877,88.9726247 L30.3226487,88.9726247 C26.6804011,88.9726247 23.6118056,86.2526419 23.1746879,82.6367194 L18.5550504,44.4221834 C18.2065153,41.539034 19.6242293,38.7287571 22.150176,37.2957114 Z" id="Path" fill="#ADC4DA"></path>
<path d="M68.593607,3.0866438 L94.8814573,28.4607721 C95.8351433,29.3813096 95.8620155,30.900668 94.941478,31.8543541 C94.489197,32.3229217 93.8659168,32.5875735 93.2146766,32.5875735 L88.608603,32.5874054 L88.6088522,55.3077597 C88.6088522,57.9587266 86.4598189,60.1077599 83.808852,60.1077599 L64.7380969,60.1074054 L64.7382432,44.0318665 L71.7133122,44.0322664 C72.3680935,44.0322664 72.9944465,43.7647377 73.4471807,43.2916941 C74.3636574,42.334105 74.3303291,40.8148745 73.37274,39.8983979 L73.37274,39.8983979 L50.1500969,17.6714054 L65.2600458,3.0866438 C66.1899666,2.18904546 67.6636861,2.18904546 68.593607,3.0866438 Z" id="Combined-Shape" stroke="#000000" stroke-width="4.80000019"></path>
<path d="M39.9033277,7.86593791 L73.37274,39.8983979 C74.3303291,40.8148745 74.3636574,42.334105 73.4471807,43.2916941 C72.9944465,43.7647377 72.3680935,44.0322664 71.7133122,44.0322664 L64.7382432,44.0318665 L64.7389267,74.5510029 C64.7389267,77.2019698 62.5898934,79.3510031 59.9389265,79.3510031 L16.5488733,79.3510031 C13.8979064,79.3510031 11.7488731,77.2019698 11.7488731,74.5510029 L11.7482432,44.0318665 L4.77448753,44.0322664 C3.44900408,44.0322664 2.37448744,42.9577498 2.37448744,41.6322664 C2.37448744,40.9774851 2.64201622,40.3511321 3.11505975,39.8983979 L36.5844721,7.86593791 C37.5124905,6.97776243 38.9753093,6.97776243 39.9033277,7.86593791 Z" id="Combined-Shape-Copy-10" stroke="#000000" stroke-width="4.80000019"></path>
<path d="M31.0829269,50.4861382 L45.404878,50.4861382 C46.7303614,50.4861382 47.804878,51.5606549 47.804878,52.8861383 L47.804878,79.3510031 L47.804878,79.3510031 L28.6829268,79.3510031 L28.6829268,52.8861383 C28.6829268,51.5606549 29.7574435,50.4861382 31.0829269,50.4861382 Z" id="Rectangle" stroke="#000000" stroke-width="4.80000019"></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div class="blurb-content">
<h3 class="blurb-title font-graphikmedium">Search properties</h3>
<div class="blurb-label">Browse thousands of exclusive properties across the country.</div>
</div>
CSS
.blurb-container {
display: flex;
margin-top: 0px;
width: 470px;
height: 98px;
}
.blurb-container * {
box-sizing: border-box;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.blurb-icon {
float: left;
display: block;
width: 99px;
height: 89px;
}
.blurb-content {
margin-left: 10px;
}
.blurb-title {
font-weight: bold;
font-size: 20px;
}
.blurb-label {
margin-top: 0px;
font-size: 18px;
}
.font-graphikmedium {
font-family: "graphikmedium";
}
You don't need to use floats. You can use flexbox for this entire thing. You also should be using a paragraph element underneath your h3 instead of a div.
The HTML and CSS is below, and I've also linked the codepen so you can play around with it and see the code in action.
https://codepen.io/bdlowery/pen/gOxqqKa
<div class="container">
<picture>
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
</picture>
<div class="text-content">
<h3>Search properties</h3>
<p>Browse thousands of exclusive properties across the country.</p>
</div>
</div>
/* main idea to get what you want */
picture {
max-width: 100px;
}
.container {
display: flex;
flex-direction: row;
align-items: center;
}
/* setup to get responsive svgs */
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
picture {
display: block;
}
svg {
display: block;
width: 100%;
height: 100%;
}
Add align-items: center; to the equation and replace the div under your h3 to a p tag instead. Here's the sandbox and I put a red border around it just so I could visually see what was going on. The code is the same as yours, I just added the align-items and replaced the div with a p. https://codesandbox.io/s/small-shadow-fde90?file=/index.html
Add this css
.text-content {
display:flex;
flex-direction:column;
width: 335px;
padding-left: 20px;
}
h3 {
font-family: 'Montserrat', sans-serif; font-size: 28px;
margin-bottom:-20px;
}
p {
color: #48525B;
font-family: "Helvetica Neue",Helvtica,Arial,sans-serif;
font-size: 20px;
line-height: 28px;
letter-spacing: 0;
}
How can I set svg pattern size properly?
I have an SVG that contains pattern and path to fill. I've already figured out how to fill svg with image, but when I do it my svg crops.
There are 4 paths that are generated randomly:
On my website I try to fill them with image using following code:
path.js
let paths = []
paths.push(
"M0,223.2L293,0h450v415.3l-78.5,101.5l-233-50.9L320.4,579l-187.8-27.4L0,223.2z",
"M743,65.7L342.7,0L44.8,89.2L0,415.5l80.3,126.2l200.8-24.6L484.6,586l150.6-26.8L743,415.5V65.7z",
"M0,223.2L248.5,0H743v415.3L495.8,552.2l-220.7-56.3L74.3,552.2L0,223.2z",
"M0,497.2l29.5-142.4L0,122.8L198.2,0l339.6,41.6L726,0v449.4L647.5,532l-238.3-34.8L290.7,567L0,497.2zz"
)
let path = () => {
return paths[Math.floor(Math.random() * Math.floor(4))];
}
export default path
Home.js fragment
<div className="intro">
<p>Some text</p>
<svg width="1540px" height="580">
<defs>
<pattern id="pattern" patternUnits="userSpaceOnUse" height="580" width="1540">
<image height="100%" width="100%" className="introImage" href={introImage}/>
</pattern>
</defs>
<path d={path()} fill="url(#pattern)"/>
</svg>
</div>
Home.css fragment
.intro {
margin: 300px 0 0 0;
width: 100%;
height: 600px;
display: flex;
align-items: center;
}
.intro p {
margin: 0;
width: 65%;
font-family: Montserrat medium, sans-serif;
font-size: 32px;
}
.intro svg {
margin-left: 200px;
}
This is what I get:
As you see, my svg gets cropped and I don't know how to fix it.
How can you make an img element the same size and alignment as emojis or text?
For some reason, no matter which vertical-align I use, the image is slightly under center from the text line. How do I match the size of the text? How do I match size of the emojis? How do I vertically center the image?
body {
color: #fff;
background: #000;
}
svg {
height: 1em;
width: 1em;
vertical-align: middle;
}
<section>
<h1>
Emoji, image and size tests
</h1>
<p>
Notice in the following lines, the svg element (fullscreen icon) is not vertically aligned with the text, and its size isn't the same as the other square emojis.
</p>
<p>
ABC<svg xmlns="http://www.w3.org/2000/svg" width="330" height="330" viewBox="0 0 87.312 87.312"><g fill="none" stroke="#fff" stroke-width="15.875"><path d="M34.396 79.375H7.937V52.917M52.917 79.375h26.458V52.917M34.396 7.938H7.937v26.458M52.917 7.938h26.458v26.458"/></g></svg>DEFG
</p>
<p>
🔇😊K▶️<svg xmlns="http://www.w3.org/2000/svg" width="330" height="330" viewBox="0 0 87.312 87.312"><g fill="none" stroke="#fff" stroke-width="15.875"><path d="M34.396 79.375H7.937V52.917M52.917 79.375h26.458V52.917M34.396 7.938H7.937v26.458M52.917 7.938h26.458v26.458"/></g></svg>🔇😊K▶️
</p>
</section>
Just add paddding bottom, Ive tweaked the fiddle.
svg {
height: 1em;
width: 1em;
vertical-align: middle;
padding-bottom:0.2em
}
https://jsfiddle.net/6hd320f4/
One solution would be to use flexbox like this:
p {
display: flex;
align-items: center;
flex-wrap: wrap;
}
Don't forget flex: wrap in order to maintain the text line break.
Note: if you edit line-height and test different values, you will find a pixel inconsistency that is hard to avoid due to the fixed proportions.
Perhaps counter-intuitive, but if you use vertical-align: top; margin: 1px 0; on the svg, it aligns correctly.
Try text-top as value of vertical-align
body {
color: #fff;
background: #000;
}
svg {
height: 1em;
width: 1em;
vertical-align: text-top;
}
<section>
<h1>
Emoji, image and size tests
</h1>
<p>
Notice in the following lines, the svg element (fullscreen icon) is not vertically aligned with the text, and its size isn't the same as the other square emojis.
</p>
<p>
ABC<svg xmlns="http://www.w3.org/2000/svg" width="330" height="330" viewBox="0 0 87.312 87.312"><g fill="none" stroke="#fff" stroke-width="15.875"><path d="M34.396 79.375H7.937V52.917M52.917 79.375h26.458V52.917M34.396 7.938H7.937v26.458M52.917 7.938h26.458v26.458"/></g></svg>DEFG
</p>
<p>
🔇😊K▶️<svg xmlns="http://www.w3.org/2000/svg" width="330" height="330" viewBox="0 0 87.312 87.312"><g fill="none" stroke="#fff" stroke-width="15.875"><path d="M34.396 79.375H7.937V52.917M52.917 79.375h26.458V52.917M34.396 7.938H7.937v26.458M52.917 7.938h26.458v26.458"/></g></svg>🔇😊K▶️
</p>
</section>
I get weird top and bottom whitespace between svg in rems
maybe its stupid question but still.. Maybe someone can explain me why i am getting weird whitespace between svg in div block when i am writing with rems. P.S font-size in html must be 10vw; example: http://codepen.io/anon/pen/OWqwXZ a
SVGs are treated the same as <img>. By default, they are inline-block and thus sit on the baseline of the text.
If you don't want that, then just set the <svg> to display:block.
html{
font-size: 10vw;
}
.wrapper{
width: 100%;
background-color: pink;
padding: 0;
margin: 0;
}
svg{
wdith: 0.30rem;
height: 0.30rem;
background-color: red;
display: block;
vertical-align: top;
}
<div class="wrapper"><svg viewBox="0 0 30 30">
<path d="M429.9 758.48C425.78 751.33 416.63 748.88 409.47999999999996 753.01C402.33 757.13 399.87999999999994 766.28 404.00999999999993 773.43C408.12999999999994 780.5799999999999 417.2799999999999 783.03 424.42999999999995 778.9C431.5799999999999 774.77 434.03999999999996 765.63 429.9 758.48ZM422.94 776.31C417.21999999999997 779.6199999999999 409.9 777.66 406.6 771.9399999999999C403.29 766.2199999999999 405.25 758.9 410.97 755.5999999999999C416.70000000000005 752.29 424.01000000000005 754.2499999999999 427.32000000000005 759.9699999999999C430.62000000000006 765.6999999999999 428.66 773.0099999999999 422.94000000000005 776.31ZM422.34 766.85L414.57 771.33C413.84999999999997 771.75 413.27 771.4100000000001 413.26 770.59L413.21999999999997 761.52C413.21999999999997 760.6999999999999 413.79999999999995 760.36 414.51 760.78L422.34 765.35C423.04999999999995 765.76 423.04999999999995 766.44 422.34 766.85Z " fill-opacity="1" transform="matrix(1,0,0,1,-402,-751)"></path>
</svg></div>