.container{
position: relative;
width: 692px;
}
.image{
position: absolute;
width: 403px;
height: 602px;
top: 91px;
left: 92px;
}
<html>
<body>
<div class="container">
<svg width="581" height="692" viewBox="0 0 581 692" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M526.636 489.523C598.467 361.569 590.666 251.284 551.879 107.757C538.582 58.5517 506.556 -37.4658 444.069 -103.204C320.276 -233.438 122.218 -189.737 6.51981 -180.688C-109.178 -171.639 -138.103 -67.5724 -164.924 3.12491C-191.745 73.8223 -123.378 416.563 -84.461 503.097L-84.2626 503.538C-45.3885 589.978 0.49324 692 167.445 692C334.682 692 444.781 635.333 526.636 489.523Z"
fill="green"/>
</svg>
<div class="image">
<img src="https://dummyimage.com/403x602/000/efefef" width={403} height={602}/>
</div>
</div>
</body>
</html>
Please don't mind the white background of image.
As you can see, I would like to remove the bottom-right overflow parts. The green area is the svg. I tried with z-index and svg clip-path. Unfortunately those methods didn't work for me somehow. Help is much appreciated. Thanks.
As I've told you in the comment: you can put the image inside the svg and clip the image with the path.
<svg width="581" height="692" viewBox="0 0 581 692" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="thePath" d="M526.636 489.523C598.467 361.569 590.666 251.284 551.879 107.757C538.582 58.5517 506.556 -37.4658 444.069 -103.204C320.276 -233.438 122.218 -189.737 6.51981 -180.688C-109.178 -171.639 -138.103 -67.5724 -164.924 3.12491C-191.745 73.8223 -123.378 416.563 -84.461 503.097L-84.2626 503.538C-45.3885 589.978 0.49324 692 167.445 692C334.682 692 444.781 635.333 526.636 489.523Z" fill="green" />
<clipPath id="cp">
<use href="#thePath" />
</clipPath>
<image clip-path="url(#cp)" href="https://dummyimage.com/403x602/000/efefef" width="403" x="100" y="100" />
</svg>
i have a problem with some icon color displaying on Iphone.
Here the html code :
<button type="submit" aria-label="Start Searching">
<i className={`icon-search`} aria-hidden="true" />
</button>
Here the svg of the icon :
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024">
<title>Search</title>
<g id="icomoon-ignore">
</g>
<path fill="#666" d="M637.117 637.117c81.229-81.229 81.229-212.928 0-294.157s-212.928-81.228-294.157 0c-81.228 81.229-81.228 212.928 0 294.157s212.928 81.229 294.157 0zM653.322 687.229c-100.573 83.475-250.045 78.086-344.302-16.17-99.974-99.974-99.974-262.067 0-362.040 99.975-99.974 262.065-99.974 362.039 0 94.256 94.258 99.648 243.73 16.17 344.302 0.272 0.25 0.538 0.502 0.8 0.765l90.509 90.512c9.373 9.373 9.373 24.566 0 33.939s-24.566 9.373-33.939 0l-90.512-90.509c-0.262-0.262-0.515-0.531-0.765-0.8z"></path>
</svg>
The icon color is correctly displayed ( that to say dark gray ) on Android or any desktop ( including Safari ) but he is fully white on Iphone ( Iphone 8, IOS 15.1 )
Does any one have a solution ?
I was investigating and version feature is deprecated in some browsers, maybe can be that:
See the compatibility table:
Extracted from: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/version#browser_compatibility
I recommend you to use and icon from: https://fontawesome.com/v5.15/icons?d=gallery&p=2
As #A Haworth pointed out: it might be ralated to some css rule in your global css.
Browser specific default styles
Since your icon already contains a hard coded fill attribute, my suspicion is your icon is colored white due to a safari default button style.
You could try to disable default button styling by applying an appearance: none rule.
button {
font-size: 2em;
display: block;
width: 100%;
}
button svg {
display: inline-block;
height: 1em;
}
.btn-default {
appearance: none;
background: #fff;
border: 1px solid #000;
}
.btn-default-use {
color: #666;
}
button svg {
display: inline-block;
width: 1em;
}
.svgAssetHiddden {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}
<p>button</p>
<button type="submit" aria-label="Start Searching">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024">
<title>Search</title>
<path fill="#666" d="M637.117 637.117c81.229-81.229 81.229-212.928 0-294.157s-212.928-81.228-294.157 0c-81.228 81.229-81.228 212.928 0 294.157s212.928 81.229 294.157 0zM653.322 687.229c-100.573 83.475-250.045 78.086-344.302-16.17-99.974-99.974-99.974-262.067 0-362.040 99.975-99.974 262.065-99.974 362.039 0 94.256 94.258 99.648 243.73 16.17 344.302 0.272 0.25 0.538 0.502 0.8 0.765l90.509 90.512c9.373 9.373 9.373 24.566 0 33.939s-24.566 9.373-33.939 0l-90.512-90.509c-0.262-0.262-0.515-0.531-0.765-0.8z"></path>
</svg>
</button>
<p>button appearance none</p>
<button class="btn-default" type="submit" aria-label="Start Searching">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024">
<title>Search</title>
<path fill="#666" d="M637.117 637.117c81.229-81.229 81.229-212.928 0-294.157s-212.928-81.228-294.157 0c-81.228 81.229-81.228 212.928 0 294.157s212.928 81.229 294.157 0zM653.322 687.229c-100.573 83.475-250.045 78.086-344.302-16.17-99.974-99.974-99.974-262.067 0-362.040 99.975-99.974 262.065-99.974 362.039 0 94.256 94.258 99.648 243.73 16.17 344.302 0.272 0.25 0.538 0.502 0.8 0.765l90.509 90.512c9.373 9.373 9.373 24.566 0 33.939s-24.566 9.373-33.939 0l-90.512-90.509c-0.262-0.262-0.515-0.531-0.765-0.8z"></path>
</svg>
</button>
<p>button use</p>
<button class="btn-default btn-default-use" type="submit" aria-label="Start Searching">
<svg viewBox="0 0 1024 1024">
<use href="#searchIcon" />
</svg>
</button>
<svg class="svgAssetHiddden" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" aria-hidden="true">
<symbol id="searchIcon" fill="currentColor">
<path d="M637.117 637.117c81.229-81.229 81.229-212.928 0-294.157s-212.928-81.228-294.157 0c-81.228 81.229-81.228 212.928 0 294.157s212.928 81.229 294.157 0zM653.322 687.229c-100.573 83.475-250.045 78.086-344.302-16.17-99.974-99.974-99.974-262.067 0-362.040 99.975-99.974 262.065-99.974 362.039 0 94.256 94.258 99.648 243.73 16.17 344.302 0.272 0.25 0.538 0.502 0.8 0.765l90.509 90.512c9.373 9.373 9.373 24.566 0 33.939s-24.566 9.373-33.939 0l-90.512-90.509c-0.262-0.262-0.515-0.531-0.765-0.8z" />
</symbol>
</svg>
Eventually, it might also be related to a Dark mode setting overriding your original fill to ensure a sufficient contrast.
I am creating a very simple React page with an SVG image on it. That SVG image has round corners. I can open it up in GIMP and see the rounded corners shown.
Now I add it to my website like this:
import cardBackR from '../img/cards/2B.svg'
...
<img className='card' src={cardBackR} />
And then when I view the page with the card over a background image, the rounded corners show as white:
Here is the full SVG code of that image.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" class="card" face="2B" height="3.5in" preserveAspectRatio="none" viewBox="-120 -168 240 336" width="2.5in">
<defs>
<pattern id="B2" width="6" height="6" patternUnits="userSpaceOnUse">
<path d="M3 0L6 3L3 6L0 3Z" fill="red"></path>
</pattern>
</defs>
<rect width="239" height="335" x="-119.5" y="-167.5" rx="12" ry="12" fill="white" stroke="black"></rect>
<rect fill="url(#B2)" width="216" height="312" x="-108" y="-156" rx="12" ry="12"></rect>
</svg>
I've tested this in both Firefox and Chrome. Any ideas what is causing the rounded corners to fail?
SVG in an IMG src should work fine, provided you escape the # with %23
<style>
body{
background:green;
}
</style>
<img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'
class='card' face='2B' height='3.5in' preserveAspectRatio='none' viewBox='-120 -168 240 336' width='2.5in'>
<defs><pattern id='B2' width='6' height='6' patternUnits='userSpaceOnUse'>
<path d='M3 0L6 3L3 6L0 3Z' fill='red'></path></pattern></defs>
<rect width='239' height='335' x='-119.5' y='-167.5' rx='12' ry='12' fill='white' stroke='black'></rect>
<rect fill='url(%23B2)' width='216' height='312' x='-108' y='-156' rx='12' ry='12'></rect>
</svg>">
Figured out the issue. I unfortunately picked a poor name for my class. That is a special class in Bootstrap and that was adding the following CSS:
.card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0, 0, 0, 0.125);
border-radius: 0.25rem;
}
What's the best way to center an SVG horizontally and vertically an SVG inside a div tag?
I know some ways are better than others, but for this what would be the best way of doing it?
<div style="width: 64px;height: 64px;background-color: rgba(0,0,0,.7);background-repeat: no-repeat;background-size: 24px;background-position: 58% 50%;border-radius: 500px;border: 1px solid blue;cursor: pointer;">
<svg viewBox="-22 0 1229 1481" width="24" height="29" style="display:block;margin: 0 auto;background-color:green;">
<path d="M0 1394V87C0 46.3 13.3 19.8 40 7.5 66.7-4.8 98.7.3 136 23l1034 634c37.3 22.7 56 50.3 56 83s-18.7 60.3-56 83L136 1458c-37.3 22.7-69.3 27.8-96 15.5-26.7-12.3-40-38.8-40-79.5z" fill="red"/>
</svg>
</div>
If you plan on setting fixed positions, pixel sizes and margins yourself, just adjust the svg vertical margin.
<div style="width: 64px;height: 64px;background-color: rgba(0,0,0,.7);background-repeat: no-repeat;background-size: 24px;background-position: 58% 50%;border-radius: 500px;border: 1px solid blue;cursor: pointer;">
<svg viewBox="-22 0 1229 1481" width="24" height="29" style="display:block;margin:16px auto;background-color:green;">
<path d="M0 1394V87C0 46.3 13.3 19.8 40 7.5 66.7-4.8 98.7.3 136 23l1034 634c37.3 22.7 56 50.3 56 83s-18.7 60.3-56 83L136 1458c-37.3 22.7-69.3 27.8-96 15.5-26.7-12.3-40-38.8-40-79.5z" fill="red"/>
</svg>
</div>
use this css style for your SVG element
margin: 0 auto;
display: block;
and this css for DIV element
display: flex;
align-items: center;
height: 100%;
I am trying to place separate SVG code at the bottom inline but am unsure as to how as this differs from usual HTML layout properties.
I have wrapped each SVG in a common div as shown:
.svg-container {
width: 60px;
display: inline-block;
}
<div class="svg-container">
<svg viewBox="0 0 128 128">
<path fill="#E44D26" d="M27.854 116.354l-8.043-90.211h88.378l-8.051
90.197-36.192 10.033z"></path><path fill="#F16529" d="M64
118.704l29.244-8.108 6.881-77.076h-36.125z"></path><path fill="#EBEBEB"
d="M64 66.978h-14.641l-1.01-11.331h15.651v-11.064h-27.743l.264 2.969
2.72 30.489h24.759zM64 95.711l-.049.013-12.321-3.328-.788-8.823h-
11.107l1.55 17.372 22.664 6.292.051-.015z"></path><path d="M28.034
1.627h5.622v5.556h5.144v-5.556h5.623v16.822h-5.623v-5.633h-
5.143v5.633h-
5.623v-16.822zM51.816 7.206h-4.95v-5.579h15.525v5.579h-4.952v11.243h-
5.623v-11.243zM64.855 1.627h5.862l3.607 5.911 3.603-
5.911h5.865v16.822h-
5.601v-8.338l-3.867 5.981h-.098l-3.87-5.981v8.338h-5.502v-
16.822zM86.591
1.627h5.624v11.262h7.907v5.561h-13.531v-16.823z"></path><path
fill="#fff" d="M63.962 66.978v11.063h13.624l-1.284 14.349-12.34
3.331v11.51l22.682-6.286.166-1.87 2.6-29.127.27-2.97h-2.982zM63.962
44.583v11.064h26.725l.221-2.487.505-5.608.265-2.969z"></path>
</svg>
</div>
<div class="svg-container">
<svg viewBox="0 0 128 128">
<path fill="#F0DB4F" d="M1.408 1.408h125.184v125.185h-125.184z"></path>
<path fill="#323330" d="M116.347 96.736c-.917-5.711-4.641-10.508-
15.672-
14.981-3.832-1.761-8.104-3.022-9.377-5.926-.452-1.69-.512-2.642-.226-
3.665.821-3.32 4.784-4.355 7.925-3.403 2.023.678 3.938 2.237 5.093
4.724
5.402-3.498 5.391-3.475 9.163-5.879-1.381-2.141-2.118-3.129-3.022-
4.045-
3.249-3.629-7.676-5.498-14.756-5.355l-3.688.477c-3.534.893-6.902 2.748-
8.877 5.235-5.926 6.724-4.236 18.492 2.975 23.335 7.104 5.332 17.54
6.545 18.873 11.531 1.297 6.104-4.486 8.08-10.234 7.378-4.236-.881-
6.592-3.034-9.139-6.949-4.688 2.713-4.688 2.713-9.508 5.485 1.143 2.499
2.344 3.63 4.26 5.795 9.068 9.198 31.76 8.746 35.83-5.176.165-.478
1.261-3.666.38-8.581zm-46.885-37.793h-11.709l-.048 30.272c0 6.438.333
12.34-.714 14.149-1.713 3.558-6.152 3.117-8.175 2.427-2.059-1.012-
3.106-
2.451-4.319-4.485-.333-.584-.583-1.036-.667-1.071l-9.52 5.83c1.583
3.249
3.915 6.069 6.902 7.901 4.462 2.678 10.459 3.499 16.731 2.059 4.082-
1.189 7.604-3.652 9.448-7.401 2.666-4.915 2.094-10.864 2.07-17.444.06-
10.735.001-21.468.001-32.237z"></path>
</svg>
</div>
If I adjust the coordinates in the viewbox to correlate with viewBox = <min-x> <min-y> <width> <height> such as <svg viewBox="0 -250 128 128"> the position doesn't change.
Any help with someone with svg experience would be greatly appreciated!
Apparently, you tried to delete the text "HTML" above the Html5 logo
in the SVG file and erased the extra part of the path. I took the
original HTML5 logo svg file and added the css markup.
The "JS" logo was not in the center of the viewport. For the
location of JS characters in the center of the viewport added:
width="100" height="100" viewBox="12 25 128 128"
The first two attributes of the viewBox shift the JS characters to the left and up to 12px and 25px respectively.
If I correctly understood your question, it should look like this:
.svg-container {
position:absolute;
top:2%;
left:1%;
width: 120px;
display: inline-block;
}
.svg-container2 {
position:absolute;
top:16%;
left:20%;
width: 60px;
display: inline-block;
}
.wrap {
width:1000px;
height:120px;
position:relative;
padding:0.5em;
}
<div class="wrap">
<div class="svg-container">
<svg viewBox="0 0 512 512">
<title>HTML5 Logo</title>
<polygon fill="#E44D26" points="107.644,470.877 74.633,100.62 437.367,100.62 404.321,470.819 255.778,512"/>
<polygon fill="#F16529" points="256,480.523 376.03,447.246 404.27,130.894 256,130.894"/>
<polygon fill="#EBEBEB" points="256,268.217 195.91,268.217 191.76,221.716 256,221.716 256,176.305 255.843,176.305 142.132,176.305 143.219,188.488 154.38,313.627 256,313.627"/>
<polygon fill="#EBEBEB" points="256,386.153 255.801,386.206 205.227,372.55 201.994,336.333 177.419,336.333 156.409,336.333 162.771,407.634 255.791,433.457 256,433.399"/>
<path d="M108.382,0h23.077v22.8h21.11V0h23.078v69.044H152.57v-23.12h-21.11v23.12h-23.077V0z"/>
<path d="M205.994,22.896h-20.316V0h63.72v22.896h-20.325v46.148h-23.078V22.896z"/>
<path d="M259.511,0h24.063l14.802,24.26L313.163,0h24.072v69.044h-22.982V34.822l-15.877,24.549h-0.397l-15.888-24.549v34.222h-22.58V0z"/>
<path d="M348.72,0h23.084v46.222h32.453v22.822H348.72V0z"/>
<polygon fill="#FFFFFF" points="255.843,268.217 255.843,313.627 311.761,313.627 306.49,372.521 255.843,386.191 255.843,433.435 348.937,407.634 349.62,399.962 360.291,280.411 361.399,268.217 349.162,268.217"/>
<polygon fill="#FFFFFF" points="255.843,176.305 255.843,204.509 255.843,221.605 255.843,221.716 365.385,221.716 365.385,221.716 365.531,221.716 366.442,211.509 368.511,188.488 369.597,176.305"/>
</svg>
</div>
<div class="svg-container2">
<svg width="100" height="100" viewBox="12 25 128 128" style="border:1px solid black">
<rect x="12" y="25" width="128" height="128" fill="#F0DB4F" />
<path fill="#F0DB4F" d="M1.408 1.408h125.184v125.185h-125.184z"></path>
<path fill="#323330" stroke="none" d="M116.347 96.736c-.917-5.711-4.641-10.508-15.672-14.981-3.832-1.761-8.104-3.022-9.377-5.926-.452-1.69-.512-2.642-.226-3.665.821-3.32 4.784-4.355 7.925-3.403 2.023.678 3.938 2.237 5.093 4.724
5.402-3.498 5.391-3.475 9.163-5.879-1.381-2.141-2.118-3.129-3.022-4.045-3.249-3.629-7.676-5.498-14.756-5.355l-3.688.477c-3.534.893-6.902 2.748-8.877 5.235-5.926 6.724-4.236 18.492 2.975 23.335 7.104 5.332 17.54 6.545 18.873 11.531 1.297 6.104-4.486 8.08-10.234 7.378-4.236-.881-6.592-3.034-9.139-6.949-4.688 2.713-4.688 2.713-9.508 5.485 1.143 2.499
2.344 3.63 4.26 5.795 9.068 9.198 31.76 8.746 35.83-5.176.165-.478
1.261-3.666.38-8.581zm-46.885-37.793h-11.709l-.048 30.272c0 6.438.333
12.34-.714 14.149-1.713 3.558-6.152 3.117-8.175 2.427-2.059-1.012-3.106-2.451-4.319-4.485-.333-.584-.583-1.036-.667-1.071l-9.52 5.83c1.583 3.249 3.915 6.069 6.902 7.901 4.462 2.678 10.459 3.499 16.731 2.059 4.082-1.189 7.604-3.652 9.448-7.401 2.666-4.915 2.094-10.864 2.07-17.444.06-10.735.001-21.468.001-32.237z">
</path>
</svg>
</div>
</div>
It sounds like there are two questions here, I'll try to answer both; my understanding is that you would like to:
Have two inline columns, each with an SVG in them that scales to the width of their respective column on resize.
Move the paths of the SVGs within the view box.
Regarding 1, to do this, you can set viewBox = "0 0 widthOfSVG heightOfSVG". Then just use CSS to set the columns adjacent to each other. Importantly, this will not work in many versions of IE – the simplest work around there is often to use javascript to resize your SVGs by binding a function to the window resize event.
For 2, unfortunately, I believe the paths need to be recomputed / rewritten to the correct location on the SVG. While this could be done with JavaScript, it's liable to become fairly involved quickly.