My logo on my website is an inline SVG
And it works very well
But for some odd reason, Chrome is treading the SVG as if it has a width of 300px, but Firefox doesn't and shows the SVG correctly
So the result is, when using Chrome it adds a lot of empty space on both sides of the actual SVG content and centers it.
Image can be seen here
And all the HTML, CSS etc. is available here http://codepen.io/peterbrinck/pen/JYNPNp
Here's the SVG
Maybe it's something obvious, and it's just because I don't know enough of SVG yet
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
id="roboto-svg"
x="0px"
y="0px"
viewBox="0 0 390.03581 103.1359"
enable-background="new 0 0 841.9 595.3"
xml:space="preserve"
inkscape:version="0.48.4 r9939"
width="100%"
height="100%"
sodipodi:docname="robot.svg"><metadata
id="metadata27"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
id="defs25" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1855"
inkscape:window-height="1056"
id="namedview23"
showgrid="false"
fit-margin-top="3"
fit-margin-left="3"
fit-margin-right="3"
fit-margin-bottom="3"
inkscape:zoom="1.4142136"
inkscape:cx="-49.249423"
inkscape:cy="172.6809"
inkscape:window-x="65"
inkscape:window-y="24"
inkscape:window-maximized="1"
inkscape:current-layer="Layer_1" /><path
stroke-miterlimit="10"
d="m 45.717895,50.417894 c -9.3,-9.3 -24.3,-9.3 -33.6,0 v 40.6"
id="path9"
inkscape:connector-curvature="0"
style="fill:none;stroke:#39cccc;stroke-width:18.23579979;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10" /><circle
stroke-miterlimit="10"
cx="455.10001"
cy="312.70001"
r="23.799999"
id="circle15-7"
sodipodi:cx="455.10001"
sodipodi:cy="312.70001"
sodipodi:rx="23.799999"
sodipodi:ry="23.799999"
style="fill:none;stroke:#39cccc;stroke-width:18.23600006;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10"
transform="translate(-365.475,-245.56411)" /><circle
stroke-miterlimit="10"
cx="385.20001"
cy="312.70001"
r="23.799999"
id="circle11"
sodipodi:cx="385.20001"
sodipodi:cy="312.70001"
sodipodi:rx="23.799999"
sodipodi:ry="23.799999"
style="fill:none;stroke:#39cccc;stroke-width:18.23600006;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10"
transform="translate(-225.5821,-245.48211)" /><line
stroke-miterlimit="10"
x1="135.81789"
y1="67.217911"
x2="135.81789"
y2="12.1179"
id="line13"
style="fill:none;stroke:#39cccc;stroke-width:18.23579979;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10" /><circle
stroke-miterlimit="10"
cx="455.10001"
cy="312.70001"
r="23.799999"
id="circle15"
sodipodi:cx="455.10001"
sodipodi:cy="312.70001"
sodipodi:rx="23.799999"
sodipodi:ry="23.799999"
style="fill:none;stroke:#39cccc;stroke-width:18.23600006;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10"
transform="translate(-225.5821,-245.48211)" /><path
stroke-miterlimit="10"
d="m 310.7179,84.017894 c -9.3,9.3 -24.3,9.3 -33.6,0 v -64.9"
id="path17"
inkscape:connector-curvature="0"
style="fill:none;stroke:#39cccc;stroke-width:18.23579979;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10" /><line
stroke-miterlimit="10"
x1="277.11792"
y1="43.417889"
x2="301.11792"
y2="43.417889"
id="line19"
style="fill:none;stroke:#39cccc;stroke-width:18.23579979;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10" /><circle
stroke-miterlimit="10"
cx="579.70001"
cy="312.70001"
r="23.799999"
id="circle21"
sodipodi:cx="579.70001"
sodipodi:cy="312.70001"
sodipodi:rx="23.799999"
sodipodi:ry="23.799999"
style="fill:none;stroke:#39cccc;stroke-width:18.23579979;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10"
transform="translate(-225.5821,-245.48211)" />
</svg>
I've figured it out
It has something to do with the aspect ratio
When in the SVG, width="100%" is set, Chrome keeps the aspect ratio in a weird way, instead of resizing the whole SVG element, it just resizes the content of the SVG, according to the height that's set with CSS
Related
I have an SVG that I want to set as a background image for an input tag so that I could use an image as a radio button. I've been following many guides but nothing seems to work. I'm suspecting that it has to be the SVG content itself.
Here's the SVG:
<svg width="80px" height="80px" viewBox="473 123 80 80" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="face_sad" opacity="0.8" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(473.000000, 123.000000)">
<path d="M40,0 C17.90861,-1.3527075e-15 2.705415e-15,17.90861 0,40 C-2.705415e-15,62.09139 17.90861,80 40,80 C62.09139,80 80,62.09139 80,40 C80,29.3913404 75.7857264,19.2171839 68.2842712,11.7157288 C60.7828161,4.21427361 50.6086596,6.49593051e-16 40,0 Z M40,77.6 C19.2340934,77.6 2.4,60.7659066 2.4,40 C2.4,19.2340934 19.2340934,2.4 40,2.4 C60.7659066,2.4 77.6,19.2340934 77.6,40 C77.5779535,60.7567678 60.7567678,77.5779535 40,77.6 L40,77.6 Z" id="Shape" fill="#FFFFFF" fill-rule="nonzero"></path>
<path d="M40,49.2 C27.2,49.2 20.16,59.008 19.408,60.128 C19.1388619,60.481731 19.0872921,60.9552533 19.2739762,61.3586265 C19.4606604,61.7619997 19.8550164,62.0291441 20.2988593,62.0529021 C20.7427021,62.0766601 21.1633224,61.8531397 21.392,61.472 C22.08,60.464 28.408,51.6 40,51.6 C51.592,51.6 57.92,60.464 58.608,61.472 C58.9937796,61.9790342 59.7085433,62.096207 60.2360188,61.7388849 C60.7634943,61.3815628 60.9197839,60.6743215 60.592,60.128 C59.84,59.008 52.8,49.2 40,49.2 Z" id="Shape" fill="#FFFFFF" fill-rule="nonzero"></path>
<ellipse id="Oval" fill="#FFFFFF" fill-rule="nonzero" cx="29.616" cy="28.8" rx="4" ry="4"></ellipse>
<ellipse id="Oval" fill="#FFFFFF" fill-rule="nonzero" cx="50.384" cy="28.8" rx="4" ry="4"></ellipse>
<path d="M54.76,35.04 C54.6,34.88 54.44,34.8 54.2,34.8 C53.96,34.8 53.8,34.88 53.72,35.04 C53.64,35.12 52.44,36.56 51.16,38.32 C49.48,40.8 48.6,42.72 48.6,43.92 C48.6,46.88 51.08,49.2 54.2,49.2 C57.24,49.2 59.8,46.8 59.8,43.92 C59.8,42.72 58.92,40.88 57.24,38.4 C56.04,36.56 54.76,35.12 54.76,35.04 Z" id="Shape" fill="#FFFFFF" fill-rule="nonzero"></path>
</g>
</svg>
and my CSS for the input:
input#bad-choice {
background: url(../assets/img/svgs/emoji-bad.svg);
}
I've tried adding thing like no-repeat left top in background or even changing it to background-image, but nothing seems to work. I even tried converting it to data URI but that didn't seem to work neither. Any tips would be greatly appreciated. Thank you.
The emoji in the SVG correctly displays in both Safari and Firefox. In Chrome and Opera it is not displayed at all. What do I need to do to have the emoji also display in Chrome and Opera?
<svg id="SVGbgcolor1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="256" height="256" viewBox="0 0 144 144" alt="SVG Bitcoin Pictograph">
<g>
<text id="flag" x="0" y="136" font-family="courier" font-size="144">🇺🇸</text>
<g id="SVGbgcolor2" transform="matrix(2.403433 0 0 2.403433 133.9157 -.2672786)" fill="#ffff11" stroke="black">
<path d="m-29.67313 32.30631c-0.0078 3.964844-0.01563 7.929687-0.02344 11.89453 4.250716-0.05757 9.512582 0.672079 12.68164-2.011719 2.020462-1.485994 1.7925-8.830264-2.508482-9.337212-3.355145-0.489526-6.76593-0.500321-10.14972-0.5456z"></path>
<path d="m-29.66532 15.95475 0.09375 9.896485c3.94585-0.118673 9.206302 0.331177 11.81609-1.285296 2.052885-1.630257 1.024997-8.44682-3.021329-8.344769-2.954353-0.25838-5.925276-0.251126-8.888509-0.26642z"></path>
<path d="m-56.63264-1.090505-0.08727 63.0228 62.6767-0.05623-0.033283-62.95665zm22.46341 6.233736h7.091797v4.530687h4.558594l-0.147496-4.383191h7.132551l-0.05164 4.411386c5.97362 0.3102366 11.03635 8.194718 8.783373 13.20227-1.403588 2.992536-4.061669 5.443424-7.199219 6.509766 4.270871 0.752585 9.289582 2.353423 9.201172 8.21875 0.4854457 8.953997-3.897788 10.18234-10.63281 13.90966v4.358297h-7.089844v-4.379284h-4.554687v4.52678h-7.091797v-4.52678h-10.81445l-0.05977-5.75189c1.541302 0.125363 4.914709-0.106688 4.939639-2.629801-0.03614-7.277082 0.06346-18.24454-0.02479-25.51909-0.172768-2.90147-4.855077-2.632184-4.855077-2.632184v-5.314695h10.81445z"></path>
</g>
</g>
<circle id="rounded1" cx="72" cy="72" r="72" stroke="black" stroke-width="2" fill="transparent"></circle>
<rect x="0" y="0" width="144" height="144" stroke="#ffffff" fill="#ffffff" fill-opacity="0" stroke-opacity="0"></rect>
</svg>
Worked it out. Needed to change font-size to 71 or less (font-size="71"). It seems that in Chrome 55.0.2883.95 greater font-sizes result in nothing being rendered. Though the emoji is present in code as can be seen when using toDataURL.
I am trying to resize this SVG file produced using inkscape
I have tried using viewBox="0 0 h w" attribute within the <svg/> but it crops the image instead of resizing. Thanks in anticipation
Inkscape doesn't add a viewBox attribute to the files it produces. That attribute is needed for scaling to work.
The solution is to convert the width and height values to a viewBox and then alter your width and height.
So add the following to your root <svg> tag:
viewBox="0 0 205 69"
Then change your width/height. If you want double size, you could do:
width="410" height="138"
Or if you want it to fill the page or it's parent container you could do:
width="100%" height="100%"
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
viewBox="0 0 205 69"
width="100%"
height="100%"
id="svg2985"
version="1.1"
inkscape:version="0.48.4 r9939"
sodipodi:docname="official.svg">
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1.88"
inkscape:cx="268.4359"
inkscape:cy="163.44054"
inkscape:current-layer="layer1"
inkscape:document-units="px"
showgrid="false"
inkscape:window-width="1301"
inkscape:window-height="744"
inkscape:window-x="65"
inkscape:window-y="24"
inkscape:window-maximized="1">
<sodipodi:guide
id="guide3594"
position="0,370.82039325"
orientation="0,800.0" />
<sodipodi:guide
id="guide3596"
position="0,229.17960675"
orientation="0,800.0" />
<sodipodi:guide
id="guide3598"
position="494.427191,0"
orientation="600.0,0" />
<sodipodi:guide
id="guide3600"
position="305.572809,0"
orientation="600.0,0" />
<sodipodi:guide
id="guide3602"
position="0,600.0"
orientation="0,800.0" />
<sodipodi:guide
id="guide3604"
position="600.0,0"
orientation="0,800.0" />
<sodipodi:guide
id="guide3606"
position="0,800.0"
orientation="600.0,0" />
<sodipodi:guide
id="guide3608"
position="800.0,0"
orientation="600.0,0" />
</sodipodi:namedview>
<defs
id="defs2987" />
<metadata
id="metadata2990">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
id="layer1"
inkscape:label="Layer 1"
inkscape:groupmode="layer"
transform="translate(0,-531)">
<path
sodipodi:type="star"
style="fill:#008080;fill-opacity:1;fill-rule:evenodd;stroke:#008080;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0.03921569"
id="path3003"
sodipodi:sides="3"
sodipodi:cx="208.33333"
sodipodi:cy="448.33334"
sodipodi:r1="329.16138"
sodipodi:r2="164.5807"
sodipodi:arg1="0.57255439"
sodipodi:arg2="1.6197519"
inkscape:flatsided="true"
inkscape:rounded="0.15947024"
inkscape:randomized="0"
d="M 484.99998,626.66667 C 435.74244,703.08492 -42.889814,679.63445 -84.441188,598.76703 -125.99256,517.89962 133.63227,115.11717 224.44119,119.56633 c 90.80892,4.44916 309.81634,430.68209 260.55879,507.10034 z"
inkscape:transform-center-x="-8.8816078"
inkscape:transform-center-y="-0.012778438"
transform="matrix(0.00520436,0.0991022,-0.10795132,0.00477775,212.00937,543.99054)" />
<path
sodipodi:type="star"
style="fill:#241f1c;fill-opacity:0.33333333;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0.03921569"
id="path3003-6"
sodipodi:sides="3"
sodipodi:cx="208.33333"
sodipodi:cy="448.33334"
sodipodi:r1="329.16138"
sodipodi:r2="164.5807"
sodipodi:arg1="0.57255439"
sodipodi:arg2="1.6197519"
inkscape:flatsided="true"
inkscape:rounded="0.15947024"
inkscape:randomized="0"
d="M 484.99998,626.66667 C 435.74244,703.08492 -42.889814,679.63445 -84.441188,598.76703 -125.99256,517.89962 133.63227,115.11717 224.44119,119.56633 c 90.80892,4.44916 309.81634,430.68209 260.55879,507.10034 z"
inkscape:transform-center-x="-8.8816118"
inkscape:transform-center-y="-0.012779205"
transform="matrix(0.00520436,0.0991022,-0.10795132,0.00477775,213.12005,546.20636)" />
<text
xml:space="preserve"
style="font-size:16.25434494px;font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#576a6c;fill-opacity:1;stroke:none;font-family:Century Schoolbook L;-inkscape-font-specification:Century Schoolbook L Medium"
x="2.427422"
y="563.2641"
id="text3791"
sodipodi:linespacing="125%"><tspan
sodipodi:role="line"
id="tspan3793"
x="2.427422"
y="563.2641"
style="font-size:36.57227707px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;word-spacing:0px;fill:#576a6c;fill-opacity:1;font-family:Ubuntu;-inkscape-font-specification:Ubuntu">Akogun</tspan></text>
<text
xml:space="preserve"
style="font-size:16.25434494px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
x="186.45212"
y="409.6254"
id="text5280"
sodipodi:linespacing="125%"><tspan
sodipodi:role="line"
id="tspan5282"
x="186.45212"
y="409.6254" /></text>
<text
xml:space="preserve"
style="font-size:16.25434494px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#008080;fill-opacity:0.50196078;stroke:none;font-family:Sans"
x="49.39143"
y="567.16937"
id="text5284"
sodipodi:linespacing="125%"><tspan
sodipodi:role="line"
id="tspan5286"
x="49.39143"
y="567.16937" /><tspan
sodipodi:role="line"
id="tspan5288"
x="49.39143"
y="584.67633"
style="font-size:13.20665646px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;fill:#008080;fill-opacity:0.50196078;font-family:Ubuntu;-inkscape-font-specification:Ubuntu">P o l y m a t h</tspan></text>
<path
sodipodi:type="star"
style="fill:#241f1c;fill-opacity:0.33333333;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0.03921569"
id="path3003-6-5"
sodipodi:sides="3"
sodipodi:cx="208.33333"
sodipodi:cy="448.33334"
sodipodi:r1="329.16138"
sodipodi:r2="164.5807"
sodipodi:arg1="0.57255439"
sodipodi:arg2="1.6197519"
inkscape:flatsided="true"
inkscape:rounded="0.15947024"
inkscape:randomized="0"
d="M 484.99998,626.66667 C 435.74244,703.08492 -42.889814,679.63445 -84.441188,598.76703 -125.99256,517.89962 133.63227,115.11717 224.44119,119.56633 c 90.80892,4.44916 309.81634,430.68209 260.55879,507.10034 z"
inkscape:transform-center-x="-8.8816136"
inkscape:transform-center-y="-0.012761026"
transform="matrix(0.00520436,0.0991022,-0.10795132,0.00477775,214.3031,538.55495)" />
<flowRoot
xml:space="preserve"
id="flowRoot3053"
style="font-size:40px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
transform="matrix(0.40635864,0,0,0.40635864,0.801987,362.21684)"><flowRegion
id="flowRegion3055"><rect
id="rect3057"
width="598"
height="182"
x="102"
y="144" /></flowRegion><flowPara
id="flowPara3059" /></flowRoot> <flowRoot
style="font-size:40px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
id="flowRoot3296"
xml:space="preserve"
transform="matrix(0.40635864,0,0,0.40635864,0.801987,362.21684)"><flowRegion
id="flowRegion3298"><rect
y="164"
x="30"
height="218"
width="502"
id="rect3300" /></flowRegion><flowPara
id="flowPara3302" /></flowRoot> </g>
</svg>
The svg/#viewBox attribute controls the range of coordinates which are shown within the viewport ( the area of the screen the svg takes up ).
The size of the viewport is determined mostly by the svg/#width and svg/#height attributes - see https://www.w3.org/TR/SVG/coords.html
The ‘width’ attribute on the outermost svg element establishes the viewport's width [...], if there are positioning properties specified on the referencing element or on the outermost svg element that are sufficient to establish the height of the viewport, then these positioning properties establish the viewport's height; otherwise, the ‘height’ attribute on the outermost svg element establishes the viewport's height.
I've got svg diagram with some yellow points(circles).
<html>
<title>Yellow circles</title>
<body>
<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" width="622.4px" height="373px" viewBox="0 0 622.4 373" enable-background="new 0 0 622.4 373" xml:space="preserve">
<polygon points="0.1,0 622.4,0 622.4,373 0.1,373 "/>
<polygon fill="#3F3F3F" points="97,51.6 586.2,51.6 586.2,295.5 97,295.5 "/>
<g transform="translate(342,1098.55)" fill="yellow">
<g transform="scale(418.2,-405.9)">
<circle cx=".2888" cy="2.0004" r=".004"></circle>
<circle cx="-.2666" cy="2.0233" r=".004"></circle>
<circle cx="0" cy="2.2727" r=".004"></circle>
<circle cx="-.5845" cy="2.3201" r=".004"></circle>
<circle cx="0" cy="2.5786" r=".004"></circle>
<circle cx=".5845" cy="2.3201" r=".004"></circle>
</g>
</g>
</svg>
</body>
The problem is that I can't see yellow circles using Firefox from 3 / 10 of machines(in most cases circles are displayed in Firefox)
Noticed, that yellow points displayed always by using any version of Chrome
I faced the same problem and found the reported bug on Firefox. Before the update is released (version 42), working workaround for me is to use ellipse instead of circle, e. g.:
<ellipse cx=".2888" cy="2.0004" rx=".004" ry=".004"></ellipse>
I have this graphic:
http://jsfiddle.net/6xzvK/
As you can see I have tried to reduce the height and the width of the image changing the width and height attributes inline, but the image doesn't get smaller but actually it is clipped..
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="422.90625" height="379.90625" id="svg9312" version="1.1" inkscape:version="0.48.4 r9939" sodipodi:docname="distancia.svg">
<defs id="defs9314"/>
<sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="0.35" inkscape:cx="547.89286" inkscape:cy="79.950317" inkscape:document-units="px" inkscape:current-layer="layer1" showgrid="false" showborder="true" inkscape:window-width="1280" inkscape:window-height="996" inkscape:window-x="0" inkscape:window-y="0" inkscape:window-maximized="1" fit-margin-top="0" fit-margin-left="0" fit-margin-right="0" fit-margin-bottom="0"/>
<metadata id="metadata9317">
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
<dc:title/>
</cc:Work>
</rdf:RDF>
</metadata>
<g inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1" transform="translate(675.75,-132.40625)">
<path inkscape:connector-curvature="0" style="fill:#cccccc;fill-opacity:1;stroke:#a7a7a7;stroke-width:40;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" d="m -617.67786,152.40969 406.78608,0 c 21.08533,0 38.05866,16.97395 38.05866,38.05836 l 0,363.78878 c 0,21.08442 -16.97333,38.05866 -38.05866,38.05866 l -406.78608,0 c -21.08229,0 -38.05866,-16.97424 -38.05866,-38.05866 l 0,-363.78878 c 0,-21.08441 16.97637,-38.05836 38.05866,-38.05836 z" id="path13632"/>
<path inkscape:connector-curvature="0" style="fill:#ececec;fill-opacity:1;stroke:none" d="m -313.87975,305.7941 35.80527,0 0,197.61986 -35.80527,0 z" id="path13634"/>
<path inkscape:connector-curvature="0" style="fill:#ececec;fill-opacity:1;stroke:none" d="m -436.01245,241.32064 35.82652,0 0,262.09332 -35.82652,0 z" id="path13636"/>
<path inkscape:connector-curvature="0" style="fill:#ececec;fill-opacity:1;stroke:none" d="m -556.61758,305.7941 35.80526,0 0,197.61986 -35.80526,0 z" id="path13638"/>
</g>
</svg>
Give the root <svg> element a viewBox attribute and it will scale rather than clip.
Something like this may work for you viewBox="0 0 800 400" but you might want to use the original width/height before you adjusted things.