.contained {
width: 80%;
max-width: 2500px;
margin: 0 auto;
}
#media all and (max-width: 780px) {
.icon-text-size {
display: inline
}
}
.svg-align {
vertical-align: middle;
}
.icon-fix {
display: none;
}
<div class="contained">
<h2 class="title"><span>Contact</span> Us</h2>
<h1 class="icon-text-size">
<svg class="svg-align" width="144" height="144" viewBox="0 0 144 144" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M91.4849 96.6599L101.565 86.5799C102.923 85.2391 104.64 84.3213 106.509 83.9379C108.379 83.5544 110.319 83.7219 112.095 84.4199L124.38 89.3249C126.174 90.0534 127.713 91.2968 128.802 92.8984C129.892 94.5 130.482 96.3882 130.5 98.3249V120.825C130.489 122.142 130.212 123.444 129.686 124.652C129.159 125.86 128.393 126.948 127.435 127.852C126.476 128.756 125.344 129.456 124.108 129.912C122.871 130.367 121.556 130.567 120.24 130.5C34.1549 125.145 16.7849 52.2449 13.4999 24.3449C13.3474 22.9749 13.4867 21.588 13.9087 20.2756C14.3307 18.9633 15.0257 17.7551 15.9482 16.7307C16.8706 15.7062 17.9995 14.8887 19.2606 14.3318C20.5217 13.775 21.8864 13.4915 23.2649 13.4999H44.9999C46.9394 13.5057 48.8329 14.0915 50.4367 15.1822C52.0406 16.2728 53.2815 17.8183 53.9999 19.6199L58.9049 31.9049C59.626 33.6737 59.81 35.6158 59.4338 37.4886C59.0577 39.3614 58.1381 41.0818 56.7899 42.4349L46.7099 52.5149C46.7099 52.5149 52.5149 91.7999 91.4849 96.6599Z" fill="#F62AA0"/>
</svg>
<br class="icon-fix"> 01328 633037</h1>
<h1 class="icon-text-size">
<svg class="svg-align" width="144" height="125" viewBox="0 0 144 125" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M129.32 20.8333C128.775 20.7846 128.225 20.7846 127.68 20.8333H15.6801C14.9622 20.8429 14.2492 20.9364 13.5601 21.1111L71.3601 71.0764L129.32 20.8333Z" fill="#F62AA0"/>
<path d="M135.24 22.4606L77.0002 72.8078C75.5013 74.1012 73.4737 74.8272 71.3602 74.8272C69.2467 74.8272 67.2191 74.1012 65.7202 72.8078L8.00022 22.8425C7.82277 23.4086 7.72869 23.992 7.72021 24.5786V94.0231C7.72021 95.8649 8.56307 97.6312 10.0634 98.9335C11.5637 100.236 13.5985 100.968 15.7202 100.968H127.72C129.842 100.968 131.877 100.236 133.377 98.9335C134.877 97.6312 135.72 95.8649 135.72 94.0231V24.5786C135.688 23.8552 135.526 23.1406 135.24 22.4606ZM21.2002 94.0231H15.6402V89.0578L44.7202 64.0231L50.3602 68.9189L21.2002 94.0231ZM127.64 94.0231H122.04L92.8802 68.9189L98.5202 64.0231L127.6 89.0578L127.64 94.0231Z" fill="#F62AA0"/>
</svg>
<br class="icon-fix"> info#verusamor.salon
</h1>
</div>
I want the svg and the text on the same line on larger screens and for the svg to get smaller as the screen gets smaller in order to keep it on one line, when the svg becomes too small I want the order to change from
svg text
new line
svg text
and change it to
svg
new line
text
new line
svg
new line text.
Thanks for any help.
set svg width & height in percentages and also use max-width properties
<svg width="15%" max-width="70%" height=""></svg>
<svg width="25%" max-width="75%" height=""></svg>
Related
.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 wanted a cylindrical container containing liquid and this liquid changes color and its amount in that container, So I used SVG for this purpose (SVG is used for liquid in a cylindrical container).
Here is the source code along with SVG
function changeCol(col) {
document.querySelector('path').style.setProperty('fill', col, '!important');
document.querySelector('ellipse').style.setProperty('fill', col, '!important');
//Its not working I dont know why.
}
function changeHeight(vol) {
//Some Code to change its height.
}
.container {
width: fit-content;
border: solid red;
}
.liquid {
width: 200px;
}
.liquid svg * {
fill: red !important;
}
<div class="container">
<div class="liquid">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216.66 325.25">
<title>liquid_RBt</title>
<path d="M216.66,28V297.25c0,15.47-48.5,28-108.33,28S0,312.72,0,297.25V28C0,43.46,48.5,56,108.33,56S216.66,43.46,216.66,28Z" style="fill:#fff;stroke:#fff;stroke-miterlimit:10;opacity:0.7000000000000001"/>
<ellipse cx="108.33" cy="28" rx="108.33" ry="28" style="fill:#fff;stroke:#fff;stroke-miterlimit:10;opacity:0.8"/>
</svg>
</div>
</div>
<div class="controller">
<div class="color-change">
<button class="col-btn" onclick="changeCol('red');">Red</button>
<button class="col-btn" onclick="changeCol('blue');">Blue</button>
<button class="col-btn" onclick="changeCol('green');">green</button>
</div>
<div class="change-amount">
<input type="number" id="amountInp" onchange='changeHeight(this.value)' placeholder="(in ml)">
</div>
</div>
I've clipped the path with a clipPath that I then move about to hide the parts of the polygon that need to disappear.
I don't know the volume of the cylinder either so you might want to scale the number.
I also fixed the colouring.
function changeCol(col) {
document.querySelector('path').style.setProperty('fill', col);
document.querySelector('ellipse').style.setProperty('fill', col);
}
function changeHeight(vol) {
// not sure how much 100ml is supposed to fill up
document.querySelector('ellipse').cy.baseVal.value = 300 - vol;
document.querySelector('rect').y.baseVal.value = 300-vol;
}
.container {
width: fit-content;
border: solid red;
}
.liquid {
width: 200px;
}
<div class="container">
<div class="liquid">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216.66 325.25">
<title>liquid_RBt</title>
<defs>
<clipPath id="cp">
<rect x="0" y="0" width="230" height="400"/>
</clipPath>
</defs>
<path d="M216.66,28V297.25c0,15.47-48.5,28-108.33,28S0,312.72,0,297.25V28C0,43.46,48.5,56,108.33,56S216.66,43.46,216.66,28Z" style="fill:red;stroke:#fff;stroke-miterlimit:10;opacity:0.7000000000000001;clip-path: url(#cp)"/>
<ellipse cx="108.33" cy="28" rx="108.33" ry="28" style="fill:red;stroke:#fff;stroke-miterlimit:10"/>
</svg>
</div>
</div>
<div class="controller">
<div class="color-change">
<button class="col-btn" onclick="changeCol('red');">Red</button>
<button class="col-btn" onclick="changeCol('blue');">Blue</button>
<button class="col-btn" onclick="changeCol('green');">green</button>
</div>
<div class="change-amount">
<input type="number" id="amountInp" onchange='changeHeight(this.value)' placeholder="(in ml)">
</div>
</div>
Set the preserve aspect ratio to none.
<svg preserveAspectRatio="none" /* here are your other attributes */>
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;
}
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.