I have made this shape with inkskape
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="86.708229mm"
height="108.46725mm"
viewBox="0 0 86.708229 108.46725"
version="1.1"
id="svg5"
inkscape:export-filename="bitmap.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview7"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false" />
<defs
id="defs2">
<linearGradient
inkscape:collect="always"
id="linearGradient1332">
<stop
style="stop-color:#2ebdbe;stop-opacity:1;"
offset="0"
id="stop1330" />
<stop
style="stop-color:#bbfbf2;stop-opacity:1;"
offset="1"
id="stop1328" />
</linearGradient>
<inkscape:path-effect
effect="fillet_chamfer"
id="path-effect427"
is_visible="true"
lpeversion="1"
nodesatellites_param="F,0,0,1,0,3.175,0,4 # F,0,0,1,0,3.175,0,4 # F,0,0,1,0,3.175,0,4 # F,0,0,1,0,3.175,0,4 # F,0,0,1,0,3.175,0,4 # F,0,0,1,0,3.175,0,4"
unit="px"
method="auto"
mode="F"
radius="12"
chamfer_steps="4"
flexible="false"
use_knot_distance="true"
apply_no_radius="true"
apply_with_radius="true"
only_selected="false"
hide_knots="false" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient1332"
id="linearGradient1338"
x1="-8.7238359"
y1="103.88622"
x2="137.07281"
y2="33.141083"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(1.0169463,0,0,0.56544787,9.4308219,-0.08872541)" />
</defs>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-60.976129,-17.450189)">
<path
id="path424"
style="opacity:1;fill:url(#linearGradient1338);fill-opacity:1;stroke:#ffffff;stroke-width:1.00318;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
inkscape:transform-center-x="-2.7149655"
inkscape:transform-center-y="0.12577677"
d="M 74.631466,44.717104 62.421924,34.403638 a 2.6778389,2.6778389 90.043215 0 1 0.0031,-4.093976 L 74.671628,19.996493 a 8.6973678,8.6973678 159.95323 0 1 5.603571,-2.044714 l 48.153211,0.0067 a 8.6807368,8.6807368 20.098102 0 1 5.60047,2.049272 l 12.20963,10.313627 a 2.6778292,2.6778292 90.04357 0 1 -0.003,4.093967 l -12.24664,10.313026 a 8.6974755,8.6974755 159.95346 0 1 -5.60359,2.044695 l -48.153211,-0.0067 a 8.680796,8.680796 20.097976 0 1 -5.600483,-2.049262 z"
sodipodi:nodetypes="ccccccc"
inkscape:path-effect="#path-effect427"
inkscape:original-d="M 77.056949,46.765923 59.996441,32.354819 77.100199,17.951336 l 54.503211,0.0076 17.06057,14.411285 -17.10382,14.403302 z"
inkscape:export-filename=".\path424.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96" />
</g>
</svg>
and the shape is ok But the overall height is so much more that the shape
in this picture I've opened it in browser and as you see the height is 409.95px
that is not desirable
how can I remove the extra height of that ?
just some bela bela to let me post this
just some bela bela to let me post this
just some bela bela to let me post this
Remove the width and the height attributes from <svg> and alter the viewBox so that it matches the size of the content.
In this example I also removed the transform attribute from the <g> and replaced the path itself using the tool SvgPathEditor.
Now the path takes up 100% of the box and the aspect ratio matches the content.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
viewBox="0 0 86 29"
version="1.1"
id="svg5"
inkscape:export-filename="bitmap.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview7"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false" />
<defs
id="defs2">
<linearGradient
inkscape:collect="always"
id="linearGradient1332">
<stop
style="stop-color:#2ebdbe;stop-opacity:1;"
offset="0"
id="stop1330" />
<stop
style="stop-color:#bbfbf2;stop-opacity:1;"
offset="1"
id="stop1328" />
</linearGradient>
<inkscape:path-effect
effect="fillet_chamfer"
id="path-effect427"
is_visible="true"
lpeversion="1"
nodesatellites_param="F,0,0,1,0,3.175,0,4 # F,0,0,1,0,3.175,0,4 # F,0,0,1,0,3.175,0,4 # F,0,0,1,0,3.175,0,4 # F,0,0,1,0,3.175,0,4 # F,0,0,1,0,3.175,0,4"
unit="px"
method="auto"
mode="F"
radius="12"
chamfer_steps="4"
flexible="false"
use_knot_distance="true"
apply_no_radius="true"
apply_with_radius="true"
only_selected="false"
hide_knots="false" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient1332"
id="linearGradient1338"
x1="-8.7238359"
y1="103.88622"
x2="137.07281"
y2="33.141083"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(1.0169463,0,0,0.56544787,9.4308219,-0.08872541)" />
</defs>
<g
id="layer1">
<path
id="path424"
style="opacity:1;fill:url(#linearGradient1338);fill-opacity:1;stroke:#ffffff;stroke-width:1.00318;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
d="M 13.2315 26.7653 L 1.0219 16.4518 a 2.6778 2.6778 90.0432 0 1 0.0031 -4.094 L 13.2716 2.0447 a 8.6974 8.6974 159.9532 0 1 5.6036 -2.0447 l 48.1532 0.0067 a 8.6807 8.6807 20.0981 0 1 5.6005 2.0493 l 12.2096 10.3136 a 2.6778 2.6778 90.0436 0 1 -0.003 4.094 l -12.2466 10.313 a 8.6975 8.6975 159.9535 0 1 -5.6036 2.0447 l -48.1532 -0.0067 a 8.6808 8.6808 20.098 0 1 -5.6005 -2.0493 z" />
</g>
</svg>
the attribute width/height in the SVG tag force it to be that many millimeters and thus so many pixels - if you remove the attributes and view the SVG file in a browser it will take up the entire viewport dimensions .. either way the viewBox attribute needs to be precise too, or left out. Depending on your usage you may want to set width/height both to 100% and the viewBox to the SVG size of your drawing - reduce the canvas in your SVG editor (apparently Inkscape) before exporting to its minimal size.
Related
This is almost definitely an issue with the SVG code itself. I have 2 SVGs from Figma and I load them into ReactJS as ReactComponents, regular stuff. Issue is that for some reason React sees them as the same SVG despite their SVG code being different. I suspect this to be an issue within the SVG code of these 2 SVGs because the same issue does not occur with other SVGs.
This is one SVG (I shorten the xlink:href in the end as it is too long):
<svg width="1215" height="550" viewBox="0 0 1215 550" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Group 9">
<rect id="Thousand-02 1" y="16" width="696.273" height="534" fill="url(#pattern0)"/>
<path id="element2" d="M1194.87 470.154C1192.44 465.157 1194.81 459.222 1200.08 456.911C1205.35 454.599 1211.6 456.848 1214.04 461.846C1216.48 466.843 1214.11 472.778 1208.84 475.089C1203.57 477.401 1197.31 475.152 1194.87 470.154ZM1197.77 468.905C1199.48 472.403 1203.83 473.965 1207.59 472.341C1211.27 470.716 1212.92 466.593 1211.21 463.033C1209.5 459.472 1205.15 457.973 1201.39 459.597C1197.71 461.221 1196.06 465.407 1197.77 468.905Z" fill="url(#paint0_linear)"/>
<path id="element" d="M738.216 20.5325L738.137 14.0237C738.171 13.7748 738.382 13.5477 738.657 13.4976L745.55 13.4265C745.813 13.4593 746.024 13.2323 746.07 12.9004L746.038 9.2672C746.072 9.0183 745.832 8.81957 745.48 8.77585L738.588 8.84686C738.324 8.81407 738.083 8.61534 738.03 8.35551L737.951 1.84671C737.985 1.5978 737.745 1.39908 737.393 1.35535L733.546 1.38317C733.282 1.35038 733.072 1.57742 733.026 1.90929L733.105 8.41809C733.071 8.66699 732.86 8.89404 732.585 8.94421L725.692 9.01524C725.429 8.98245 725.218 9.20949 725.172 9.54136L725.204 13.1746C725.17 13.4235 725.41 13.6222 725.762 13.6659L732.654 13.5949C732.918 13.6277 733.159 13.8264 733.212 14.0863L733.291 20.5951C733.257 20.844 733.497 21.0427 733.849 21.0864L737.696 21.0586C737.971 21.0084 738.182 20.7814 738.216 20.5325Z" fill="#FDD08D"/>
</g>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0" transform="translate(0 -0.0282801) scale(0.00151745 0.00197858)"/>
</pattern>
<linearGradient id="paint0_linear" x1="1200.22" y1="456.866" x2="1208.02" y2="475.462" gradientUnits="userSpaceOnUse">
<stop stop-color="#BFF0DD"/>
<stop offset="1" stop-color="#57D2A3"/>
</linearGradient>
<image id="image1" data-name="Thousand-02.png" width="659" height="534" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAApMAAAIWCAYAAAALawaWAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAz4ESURBVHgB7L0JoF5VdS++9nfnm5vkZiRzLpAAYUyYFdEg4KwEaat9ao19RUFtwf+Tvvbpe4TWZ/vap6CtA9oK2tr2WZXBeSJBQWYIIPOQG8g83uQmueN31n9Pa++199nnu98NSbiB80u
And this is the other SVG:
<svg width="1415" height="654" viewBox="0 0 1415 654" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Group 8">
<rect id="thousand-01 1" x="728" width="687" height="654" fill="url(#pattern0)"/>
<path id="element3" d="M606.673 131.912L605.75 125.469C605.75 125.218 605.918 124.967 606.169 124.883L612.628 123.962C612.88 123.962 613.048 123.711 613.048 123.377L612.545 119.778C612.545 119.527 612.293 119.36 611.957 119.36L605.498 120.28C605.247 120.28 604.995 120.113 604.911 119.862L603.989 113.418C603.989 113.167 603.737 113 603.401 113L599.794 113.502C599.543 113.502 599.375 113.753 599.375 114.088L600.298 120.531C600.298 120.782 600.13 121.033 599.878 121.117L593.419 122.038C593.168 122.038 593 122.289 593 122.623L593.503 126.222C593.503 126.473 593.755 126.64 594.09 126.64L600.549 125.72C600.801 125.72 601.053 125.887 601.137 126.138L602.059 132.582C602.059 132.833 602.311 133 602.646 133L606.253 132.498C606.505 132.414 606.673 132.163 606.673 131.912Z" fill="#FDD08D"/>
<path id="element" d="M652.909 630.154C650.602 625.157 652.846 619.222 657.834 616.911C662.821 614.599 668.743 616.848 671.05 621.846C673.356 626.843 671.112 632.778 666.125 635.089C661.138 637.401 655.215 635.152 652.909 630.154ZM655.652 628.905C657.272 632.403 661.387 633.965 664.94 632.341C668.431 630.716 669.99 626.593 668.369 623.033C666.748 619.472 662.634 617.973 659.08 619.597C655.589 621.221 654.031 625.407 655.652 628.905Z" fill="url(#paint0_linear)"/>
<path id="element2" d="M1.18132 345.401C-1.81721 338.904 1.10028 331.189 7.58359 328.184C14.0669 325.179 21.7658 328.103 24.7644 334.599C27.7629 341.096 24.8454 348.811 18.3621 351.816C11.8788 354.821 4.17986 351.897 1.18132 345.401ZM4.74714 343.776C6.85422 348.324 12.203 350.354 16.8223 348.243C21.3606 346.131 23.3867 340.772 21.2796 336.142C19.1725 331.513 13.8238 329.564 9.20442 331.676C4.6661 333.787 2.64006 339.228 4.74714 343.776Z" fill="url(#paint1_linear)"/>
</g>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0" transform="scale(0.0014556)"/>
</pattern>
<linearGradient id="paint0_linear" x1="657.971" y1="616.866" x2="666.07" y2="635.144" gradientUnits="userSpaceOnUse">
<stop stop-color="#BFF0DD"/>
<stop offset="1" stop-color="#57D2A3"/>
</linearGradient>
<linearGradient id="paint1_linear" x1="7.7622" y1="328.126" x2="18.2915" y2="351.887" gradientUnits="userSpaceOnUse">
<stop stop-color="#BFF0DD"/>
<stop offset="1" stop-color="#57D2A3"/>
</linearGradient>
<image id="image0" data-name="thousand-01.png" width="687" height="654" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAq8AAAKOCAYAAACIkfAOAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUABANcSURBVHgB7P0JnFxHft8J/iIzK+sGqnADBMEim1ffQHdLsqYtEZTGktsaqdmWPZLtsUjtyvJovOtm27OzO+ORAVpH2
With Chrome the image looks perfectly and with Mozilla it looks deformed.
Chrome !
Firefox !
I have tried to modify the code to make it compatible but I have not succeeded.
<div class="col-md-3" >
<ul class="nav tab-info">
<li class="active"><img style="width:100%;" src="{!!asset('img/fechas/programa.svg')!!}"></li>
<li><img style="width:100%;" src="{!!asset('img/fechas/ponentes.svg')!!}"></li>
</ul>
</div>
This is the code of the speakers image, I made some modifications to the original but I have not achieved anything, I hope you can help me I leave the code at the request of the partner. Thank you.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
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:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="350"
height="93"
viewBox="0 0 350 93"
version="1.1"
id="svg74"
sodipodi:docname="prueba.svg"
inkscape:version="0.92.3 (2405546, 2018-03-11)">
<metadata
id="metadata78">
<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>block1m-dn</dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1600"
inkscape:window-height="837"
id="namedview76"
showgrid="false"
inkscape:zoom="0.76940455"
inkscape:cx="125.41259"
inkscape:cy="214.94077"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="Page-1"
inkscape:snap-text-baseline="true" />
<!-- Generator: Sketch 51.1 (57501) - http://www.bohemiancoding.com/sketch -->
<title
id="title45">block1m-dn</title>
<desc
id="desc47">Created with Sketch.</desc>
<defs
id="defs51">
<linearGradient
id="linearGradient858"
osb:paint="solid">
<stop
style="stop-color:#c00000;stop-opacity:1;"
offset="0"
id="stop856" />
</linearGradient>
<circle
id="path-1"
cx="30"
cy="30"
r="30" />
<path
d="m 102.304,31 h -3.36 V 13.984 h 3.36 z m 6.84,-6.792 V 31 h -3.192 V 19.192 h 3.096 v 1.464 c 0.72,-1.224 2.136,-1.776 3.408,-1.776 2.928,0 4.272,2.088 4.272,4.68 V 31 h -3.192 v -6.888 c 0,-1.32 -0.648,-2.352 -2.184,-2.352 -1.392,0 -2.208,1.08 -2.208,2.448 z m 22.08,-10.584 v 15.24 c 0,0.792 0.048,1.656 0.096,2.136 h -3.048 c -0.048,-0.24 -0.12,-0.816 -0.12,-1.368 -0.528,0.936 -1.728,1.656 -3.312,1.656 -3.36,0 -5.76,-2.64 -5.76,-6.216 0,-3.456 2.328,-6.168 5.664,-6.168 2.04,0 3,0.84 3.336,1.464 v -6.744 z m -8.928,11.448 c 0,2.112 1.248,3.36 2.928,3.36 1.632,0 2.904,-1.248 2.904,-3.384 0,-2.112 -1.272,-3.288 -2.904,-3.288 -1.632,0 -2.928,1.2 -2.928,3.312 z M 137.776,31 H 134.68 V 13.624 h 3.144 v 6.864 c 0.528,-0.84 1.824,-1.608 3.576,-1.608 3.456,0 5.448,2.664 5.448,6.168 0,3.576 -2.208,6.24 -5.568,6.24 -1.632,0 -2.88,-0.72 -3.504,-1.728 z m 5.88,-5.928 c 0,-2.16 -1.296,-3.336 -2.928,-3.336 -1.608,0 -2.952,1.176 -2.952,3.336 0,2.136 1.344,3.36 2.952,3.36 1.632,0 2.928,-1.2 2.928,-3.36 z m 12.912,-5.928 v 3.216 c -0.36,-0.072 -0.672,-0.096 -0.96,-0.096 -1.632,0 -3.048,0.792 -3.048,3.336 V 31 h -3.192 V 19.192 h 3.096 v 1.752 c 0.72,-1.56 2.352,-1.848 3.36,-1.848 0.264,0 0.504,0.024 0.744,0.048 z M 166.528,31 c -0.048,-0.24 -0.096,-0.792 -0.096,-1.272 -0.648,1.104 -2.016,1.584 -3.264,1.584 -2.856,0 -4.488,-2.088 -4.488,-4.656 v -7.464 h 3.192 v 6.816 c 0,1.32 0.672,2.376 2.16,2.376 1.416,0 2.232,-0.96 2.232,-2.328 v -6.864 h 3.192 v 9.672 c 0,0.912 0.072,1.728 0.12,2.136 z m 17.544,-17.376 v 15.24 c 0,0.792 0.048,1.656 0.096,2.136 H 181.12 C 181.072,30.76 181,30.184 181,29.632 c -0.528,0.936 -1.728,1.656 -3.312,1.656 -3.36,0 -5.76,-2.64 -5.76,-6.216 0,-3.456 2.328,-6.168 5.664,-6.168 2.04,0 3,0.84 3.336,1.464 v -6.744 z m -8.928,11.448 c 0,2.112 1.248,3.36 2.928,3.36 1.632,0 2.904,-1.248 2.904,-3.384 0,-2.112 -1.272,-3.288 -2.904,-3.288 -1.632,0 -2.928,1.2 -2.928,3.312 z"
id="path-3"
inkscape:connector-curvature="0" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient858"
id="linearGradient3613"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(10)"
x1="78.916122"
y1="44.384567"
x2="323.81326"
y2="44.384567" />
</defs>
<g
id="Page-1"
style="fill:none;fill-rule:evenodd;stroke:none;stroke-width:1">
<g
id="block1m-dn">
<g
id="Text-Copy"
transform="translate(97,7)" />
<g
id="Group-Copy"
transform="translate(20,7)"
style="opacity:1;fill:#ffffff;fill-opacity:1">
<g
id="Oval"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#818388;stroke-width:4">
<g
id="g971">
<circle
style="fill:#ffffff;fill-opacity:1"
r="30"
cy="38"
cx="20"
id="circle55" />
</g>
</g>
<g
id="Artboard-17#4x-Clipped"
style="fill:#ffffff;fill-opacity:1">
<mask
id="mask-2"
fill="white">
<use
xlink:href="#path-1"
id="use58"
x="0"
y="0"
width="100%"
height="100%" />
</mask>
<g
id="g61"
style="fill:#ffffff;fill-opacity:1" />
<g
id="g968" />
</g>
</g>
</g>
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:50.66666794px;line-height:1.25;font-family:Bahnschrift;-inkscape-font-specification:'Bahnschrift, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:url(#linearGradient3613);fill-opacity:1;stroke:none"
x="84.957787"
y="62.370247"
id="text3785"><tspan
sodipodi:role="line"
id="tspan850"
x="84.957787"
y="62.370247"
style="fill:url(#linearGradient3613);fill-opacity:1">PONENTES</tspan></text>
<image
y="19.55138"
x="16.953688"
id="image847"
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAABHNCSVQICAgIfAhkiAAAAAlwSFlz AAALEwAACxMBAJqcGAAAFARJREFUeJztnXvcVVWZx79cXkAUkZtg4gAFQmh5AUVFHJKi1PGSQ2o2 6aiNztSYNuT0abyU2jQftRqbT9llzMQsJ8cZNRO1j4VXBG95ASFUQEDjqsD7cpEXOPPH8x44nDl7 7bX3Xpdzzvt8P5/nk/Huc9Zvr7Ofvdde63meBYqiKIqiKIqiKIqiKIqiKIqiKIqiKIqiKIqiKIqi KIqiKIqiKIqiKE1Cl9gClKaiL3AQ0A9oAdqB94AVwPqIunKjDqIUYRRwKvAxYDwwxHDsKuB5YBbw ALDIuzpFiUAP4G+BuUCpgD0HXAj0DKpeUTzRBbgAWEYxx6i25cBFQNdwp6IobhkFPIVbx6i22cDo UCekKK44G2jDr3OUbRNwbpjTUpTiXEkYx6i2b4Q4OUUpwvXEcY6y3eD/FBUlH5cT1znKNt33iSpK VqYA24nvHCVgBzDV7+kqij39gXeI7xiVtgoY5POkFcWWnxPfIWrZL3yetKLYMA7YSXxnSLKj/Z26 oqTzAPGdwGQP+Tt1RTFzMPX99CjbWF8dkITGvyggQYONENl9UWwBSudkMfGfDja2zFcHKEoSBxP/ ws9ih/jphtroEEuZGFtARoLqVQdRDo8tICNB9XYP2ZhSky7AUGAYsG/Hv20EliK53L75UIA2XDIy ZGPqIHHoC5wFnA5MYrdjVLMeeAK4D7gHaPWgxZRHXo80ml4lA4OBm5HEoKwvp63ATcBAx5r+lENL TFvi+PyVOuHvkSdC0QtkHZIb7opFDjSFtKUOz12pA3ojwyPXF8ovgV4O9L3sQZtPe83BOSt1Ql+k GIGvi+VxoE9BjY961OfDZhU830zoNK8/egG/AY712MYJwL1Iraq8LHakJRRLQjamDuKPm5EL2DdT gBsLfH6eKyGBeDW2AKU4pxB+6DElp9bxEbQWsWNynqdSJ/QgTvDfQqBbDr1dgdUR9Oaxd3OeY250 iOWe84AREdodTb6iazuR95hG4H6kkIPSwMScNn0up+YJETVnsck5z0+pEz5C/Isob31bn9PRLuyP Oc+rEDrEcsunYgsAPpnzc9c6VeGe62I0qg7iFp9rHrYcl/NzzwDbXApxyBNEek9SB3HLmNgCyK/h 8xRbcPTFViSOTWkC3iX+WH1lTu2v1oH2WvalnOej1CHvE/+Casuh+/g60F3Lfp7jXJQ6Jk+eh2vL s5vsnXWgu9oeQnbKVZqIt4h/Yb2eUfMAZJwfW3el3UedbO6pL+lueTO2AOCNjMdfQJ1cjB18DzgT Ga5GRx3ELS/EFoDsRW5LF+BiX0IyshpxjOlI+IvShEwl/vDkLzPo/bjldz4LfAH4Lu4nItqBW5C9 SZQmpwVYQzzn+DPZol1NqcCtwE+AI6s+cxCS67KhoNY24Ec0XtkhpSA3EM9Brs+g8wDk7l39HS8h C3Npqby9gXOAX2G/K9VK4L+AzwH7ZNAajUao6N1oDEFe1nsHbrcV+CCw1vL4q9jtUFuAXwM/Bubm bP9AZHuCg5DhUg8kdOVdYDmSr7I853crTcZVhH96XJFBX1dkSno+8GVgv7wnqih5aEFmtEI5xzNk q5J5AFLRUVGiMYIwL+wrkWGN4gFdB/HHUmBGgHZuJ0yRa0VxxlhgDuGGWLOpj1B7RUnli8SJbdoC XBLg/BQlF92R8OzQjlFt/4lua6HUGb2AmcR3jrL9lvoKQFQ6MT2Ah4nvFLWcRPMplOjMIL4zJNmt Hs9bUVK5jPhOkGb/4O3sFcXAYUisUWwHSLOtBN5bXFG6IYlJsS9+W5uLLgorAbmE+Bd9VrvQS08o ShW9kPin2Bd8VltBfRaGq2v0sZudi5DtnBuNA4HzY4tQmp8FxH8a5LWXPfSHouziWOJf5EVtnPNe aWJ0iJWNabEFOOCvYwtQmpf5xH8CFLUoG9E0Klq0wZ5BSHGzRmcnUm40Tw3fTocOsew5IrYAR3RF ogAUC9RB7BkbW4BDNPTEEnUQe5qpMMLQ2AIaBXUQewbFFuCQ/WMLaBTUQewJXSnRJ810Ll7RWSx7 9qZ5MvS2AZtji1AURVEURVEURVH2pLO8pPcHTun4385yzj5Zi5QV0nCVJuAE4D3iBwk2m60DJmb4 HRqSZr+b9kSqrA+JrKNZWYHsatUeW4gvmn2h8CjUOXwylOYJ4qxJszuI7rftn6bu42YfYvVANtTU 4Dw/LAFGATtiC/FFsz9BtgGfQbZCU9yyEjiLJnYOaP4nSJk+wFRgILvP+Qjg4miKGosfs7siSgnJ rPwdsCmaIsU704g/VdoodkbOPm54mn2IpSiFUAdRFAPqIIpiQB1EUQyogyiKAXUQRTGgDqIoBtRB FMWAOoiiGFAHURQD6iCKYkAdRFEMqIMoigF1EEUxoA6iKAbUQRTFgDqIohhQB1EUA+ogimJAHaQ4 JeqzsmA7TV5xJATdYwtoMOYh1TzmAvOB5cDGjr91Rfb+G4FsszyJ3ZVUfLKmQ9OTSOWRJR3/Vi7o tg+yAekhwDEdmj7iWZPSBNhWNXkPuBEYk6ON7sBJwAPIBeuqysgO4H7gk0C3HLpGAzch1dm1qolS kzQH2QJcB+zrqL3DgEdS2rSxmbh7AvQFvoWcqzqIsgcmB3kaGOmp3XOAdw1tJ9k6pEqkD0YBsw1t q4N0QpIc5DvkG7ZkYRjwUkL7tex5/NcX7g78e0L7ndZBGuElfTgwDtmHYj92vxe8iVw4Kxy1UwIu BX5ocWwf4GhkLD8Y2R56E/LS/kqHmaqevwUcj7xHnJjS1iPAmaRv29wN+GiHDUW2rW4HVgELgeeA VsPntwNfQfZTuTmlrSwcBIwHPgT06/i394DFyO+3zGFbnYbBwDXAn0i/u84DvgYMyNhG9RPkH1OO 7w58FngUufBMmtYCPyV974y9gCcM3/MosgmQiXHArcgQzKRpGzLbdTbpN8bLqz6b9QkyEPgX4LUU TSVgAXAlMChjG52SvYBvI3fLrGP0VuAqZMsDGyod5Hspx56BPLHyvFTfiwypkugHvF7jcwswTxB8 EJkdy6NpEfBXKef8/YrjbR2kJ/BNoC2Hpk3AtUAvy7Y6HYciQ4E8P3ilvYTdC3bZQWaTfEftDdzh QFMrcK5By2HA+xXHbwY+bDj+fPJdhNX2M5IvyBZgDvYOMgZ5mhfVND/l3Dslk5EFt6KdW7a1wISU Nqch05ujEv7ej90XiCu72qDn6orjphuOu86xpqeQ6d5ajEEcN81BjsPtRqnrkXc0BbmQN+H2Ry93 smm9YBoynKtFb2S13LWmEnBFQps9kRfXBSQ/0a70pOlpkp8kN2B2kCNwe3MrWytwpKHdTsH+wDv4 +dFLyHtD0t3xE8isWC3u9KhpB7ICXosLkXWSWpyK29X4ars1od3+wBTD35Z51LSso41Oy93469yy /TSh7aRAzTMDaHobmSqupoXaazD9kOla37pOTuiTpL5y8X6WZncktN30HI//zi0hd+yPWmpqQYY5 IXR9y1ITyOJlCE0LsV8kPSqQplJHW52O3xKug++01PQ3ATWtRyJt0+iLmxkrW5tm2Vf3BNR0j6Wm puEDyJ09VAdvJfldpJJZATWVkOnaNC4JrOkhC00DSV8sdWnt+E8bqEmshKlTArfdE8mDMLEfksMR ktMcHeOSE5EwFRMnETZMqZw2EJxYDnJchDYnpvx9Av6DFKtJ0wRwrHcVe9KD9DF/Pf5+XojlIKMj tJmW8BRD02CSp5pBpsH7Gf7ui3rsqzwJa4WJ5SCD67DNGJrS2q1HTTZ/90GUvogV7m4bUFiUnchi 0ztICLqJFv9yatIl5998ktYXv0MWYQci6QgH+BZEuGtmD2I5iCkvoQglJPjwAeBxpIjBFsvPvu1J UzU7kfinBxGNiwzHvoIMsyYgK/+nY44MdsXKlL9/per/90felaYiYSl/4UGTr2umLnkQt9OA65CF t6I/zCTg10jykOupyjVIKHiRzMAuSGDn/+BnmnwlkoeTNbemWuMU4DeOtd1XQFPDMR03nVYurFAr bKMIY5BsPxcaW5Egw7Sp06wciqxZuNC4AQmi3MuxxiNxt7b0Zcfa6p6TkHTZvB32JJLG6ZPTKRYD 9QiScuqTzyDh/UXuzL7fIS4gf8TvcpKDO5ueAcDDZO+0bxNuBm4w8FhGfTuArxPuJXso2XNXtpGe ZuySkcCrGTXOJHI0b9EfsC9wMDKb0QvJhFuFpJBusvyObkihhEssjt0OfAGYkUFjPyQpagCyor4Z mdV6AwlBsaEFuA2J1UpjK5K7nmXMPLBDY/+OttqQSYM3kQvZhl7Ar4BPWxzbhrxM/z6DxsHIRd4P +c3akLv7YuR3saEP0i9phSoAfgBchrn4RSV7I304GMnn2QKsRq7FYC/4XZAKFTcjiT1Jnr8TeBH4 V+wXeJJKzpRtO3CW5XdNBG6hdq532dqRu+7VyFRlGl0QJzFp3Ep6SEv5u6YgORhLDd/3PlLU4Qok fi2N7sB/p2jciN3qfDckJOgOxFmTvm8z4miXYhcv1QspRmHSeJPF9wCMBf4N+CPJuTI7kVTg7wCH W35vLqYgmWd5xpEPYpcd9gvDd3zR4vOnAi/k0LcDyU1Jc+ZuJBdK2ImdA38Wu2oftRz6dtKneXuQ PCRsBz6e8vmuyFM6T9j/FmQ0kLao1weZgq/1HbelfBYkFCbP0LyETK2fYNGGNfsBd+UUU30BfR9z 1YqeSP2m6s8mJT2V2Z/8FT4qbRsyK2aKyepD7XJESem7ZYaR/V2mlm1CZgFNw+NB1J4AuSxF44ep 3f9ZbT3iZCZG8P/z2OdgXhDshTigiynuGTiY/RyL+wSiFzEPF0ayZ476QszTj+Nxn7b7OOYYqHHs Ge49B7NTTSFfuVGT3Y+MtU1tVg470sLYP437vJMZmFflz6k4tg0pZZTEULJVo7SxRSQX7UjlcNKL keW1pZiHCl+tOHay4bhJyAuYD43zMBczu6njuHZkTSKJ09izpI9Lm4056ar8ztSGebr5PPzl5zyE +alQXjT+J8Mxw5FqlD70rcb8+yUK8p0DvZDku3QLMsv0vwaNh2Bfvj+vPUvy02tfZHX8FoPGiaRX Ti9qj5D89BqCOMe1Bo0n4ydyoNLuMrQ/GnMll/7Ind6nvreBAw0a96AHcmH4FFS2e0keS5+PFFSr xd6YZ9Fcmun9ZzrJHTsQ8+yPS7veoPEakrMph+F+6JdkppXw4Ya/uXi3tLEnscwH+logQWU7O0GH 6SX0xsAak+btTRpDVPwo23aSbyYmjTMDatyM3XR6JZ8LqK9E+iQGAwlbIKCELDZlCWUejsw2hdT4 CtkWVccF1ldC1hayMDWCRtNQq5qeFAtFymPrMSewcW2ETishBdNs+UEkjadm0Biy4kelHZ1B42MR 9O3AfmOiv4ugr4RUpa9JV+RuHkPU05ad1gu3NWCz2P2WGgcR/glXtp9YahwZSV8Jia6wwVfp1zR7 I0nQhIidVsIuovTkiPrex7zuUObCiBpXYzcU/OeIGhdY6Dswor4SFe9zlRGxH7MQ7pPJFsfE1NgD u2oeMTUOQqa/04ipcQzpN8PJAXSY2NU/lQ4Se+9sm/Zja7QpYaoai7cfW9+uPqx0kOHhdeyBKcyg zHDfIlIYYXHMcN8iUkjT2EKGRTFPpGkcHkKEgV36Kh3E1X7gebFpvxE0uk7/zUqaxtj6IF1j3fzO lQ5SiiCkEpv2VWPx9mPrg/rXuKv9SgfZEEFIJTbtN4LGjd5VmEnTWA7ujEmaxrr5nSsdZEkEIZW8 aXFMbI2LLY6pd43bkfWumKRprJs+rHSQlyMIqSSt8iHE12jTvmo0UyL9t66bPqx0kFkRhFTymMUx MTVuAZ6xOC6mxj8jaQRpxNQ4D0kTMPE4cYeBf6j1j10It/1YtdUUVIMWitWAKmJ3W2rshxRviKHx Pyw1DsPvhqAmu8ZS4xOR9L1mEvX1SKLOtew0CLdfX7V9IoNGn7vkmiwp5L0WeYseFLF27MvDfj6C vhLmzEb6Ej4Y8HWyFdE+AP9ZetU2N4M+kHCPkFvMlZDEoixMCqyvhF3FkjLdkYmbkPrWYFEi9kuB RSVtPWziGwH17UQCObNyS0CNW8lXfCDENtxl24CkAGfhjID6SsBFNqK6Ie8EIQTdbttTVfQgX/2r PGZbxKyafZHQ6RAav5pT42DkxT6ExvNzavxlIH0zyZAUNwRzxT8X9gLFKp6PwH9hid9TbA+Vw8hf tNnW7qZYCdlJ+J9U+FEBffsglRN96nudHLvoHoy/ogPzcbOl1hH4m9Wag5uYoMn4K030MJKaWpTT 8Vea6C6KFxofQr5qlDb2FnaBsjUZRnKJyLz2B9xW7B6D+7Iw92KXHGXLUbjPr74Nt9vGnYj7m813 cVeFfwC710dc2fM4iGzeCykZWnRWZiuykYyPrZb7AD+j+Nz+RvxtCTAQN7nqa5EpUB8Mxc3079vI U8k13ZAJmqJDwnbk3dLpvoeHI4Xc8oi5jQKPsQwcQ74feAtSDMKmgnpRppBvEawVKXdUZHs0W04j X43edcgF7DukfiRS1rSy/KuN7UCq39tkXeZmOLKgOAupdVRLyAZkVuBSpLB0aEYhK7ZPkXy3WYcU YriYOHuRH4oUMHiW5CIPq5Af9DzMJUZ9MR65075I8sW4AplpOgtzYXIfDAEuR26KSZMhbUhJpCvI sT9k0Q10uiI1XwchQ7FNyEaQ5anDeqArsnpb3uSnDSl2vTqmqCq6I+97/ZHHfhty4a2LKaqKFuTm 2K/jv1uRLbbXR9RUzQeQyZ+9kZv3Gna/+ymKoiiKoiiKoiiKoiiKoiiKoiiKoiiKoiiKoiiKoiiK oiiKoiiKonRu/g/PekVXsFnsPQAAAABJRU5ErkJggg== "
preserveAspectRatio="none"
height="46.169998"
width="46.169998"
style="fill:#c83737;fill-opacity:1" />
<path
style="opacity:1;fill:#c00000;fill-opacity:0;stroke-width:0.32492658"
d="M 35.476697,76.584652 C 17.384745,73.676488 5.4802854,57.004989 8.7140086,39.10507 10.555267,28.912989 18.042219,19.634036 27.634373,15.656119 c 4.293653,-1.7806 7.346505,-2.359559 12.391297,-2.349951 5.516447,0.01051 8.842051,0.728131 13.416693,2.895159 3.956897,1.874399 6.47746,3.696265 9.491206,6.86025 3.926864,4.122624 6.303952,8.244295 7.86696,13.640649 0.65576,2.26404 0.74091,3.252168 0.72506,8.413985 -0.0166,5.404257 -0.08461,6.065502 -0.895124,8.702132 C 67.206711,64.955975 58.908407,72.9092 47.498981,75.987931 45.560742,76.510946 37.505484,76.910768 35.476697,76.584652 Z M 46.93883,72.226955 C 55.430952,70.062872 62.7261,63.704855 66.03809,55.58118 72.654085,39.353414 62.858598,21.110652 45.554789,17.433803 c -1.636502,-0.347737 -3.517684,-0.442459 -6.666363,-0.335669 -3.785512,0.12839 -4.809432,0.287306 -7.473311,1.159889 -4.597985,1.506121 -7.739085,3.484362 -11.37243,7.162271 -3.420727,3.462681 -5.277149,6.390127 -6.630549,10.455902 -2.596413,7.799935 -1.711605,16.66101 2.328703,23.321245 4.529517,7.46667 11.81826,12.359619 20.385712,13.684972 2.702723,0.418099 7.815849,0.108135 10.812279,-0.655458 z"
id="path862"
inkscape:connector-curvature="0" />
</g>
</svg>
For Firefox, it is necessary to indicate not only the width, but also the height of the image
<img style="width:100%; height:100%"
Try opening the SVG file in a text editor and delete the line preserveAspectRatio="none"
The none attribute stretches the image to the full width of the parent container without maintaining proportions
preserveAspectRatio
Update
Thank you very much to #enxaneta for this comment:
You are using a very strange liniar gradient just to fill the text
with a solid color.
It helped to find a solution.
As it turned out, if one of the two colors is black, then the vector editors: Figma, Sketch write a linear gradient with only one
attribute stop-color instead of two
<linearGradient id="linearGradient858">
<stop offset="0" id="stop856" style="stop-color:#c00000;stop-opacity:1"/>
</linearGradient>
Chrome processes this form of writing the gradient, butFirefox does not understand it because it more strictly complies with the requirements of the SVG specification
Gradients are used to style text, so there is such a difference in rendering text.
I used the SVG-EDITOR code optimizer, that's what happened in
the end
Note
It is necessary to add * .svg files to the optimizer
We remove the gradients, add text as a separate line using the usual
text decoration attributes
<text x="74.96" y="62.37" id="text3785" style="font-size:50;font-weight:bold; fill:crimson">PONENTES </text>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="350" height="93" width="350" height="93" viewBox="0 0 350 93" version="1.1" id="svg74">
<metadata id="metadata78"/>
<title id="title45">
block1m-dn
</title>
<desc id="desc47">
Created with Sketch.
</desc>
<defs id="defs51">
<!-- <linearGradient id="linearGradient858"> -->
<!-- <stop offset="0" id="stop856" style="stop-color:#c00000;stop-opacity:1"/> -->
<!-- </linearGradient> -->
<circle id="path-1" cx="30" cy="30" r="30"/>
<path d="m102.3 31h-3.36V13.98h3.36zm6.84-6.79V31h-3.19V19.19h3.1v1.46c0.72-1.22 2.14-1.78 3.41-1.78 2.93 0 4.27 2.09 4.27 4.68V31h-3.19v-6.89c0-1.32-0.65-2.35-2.18-2.35-1.39 0-2.21 1.08-2.21 2.45zm22.08-10.58v15.24c0 0.79 0.05 1.66 0.1 2.14h-3.05c-0.05-0.24-0.12-0.82-0.12-1.37-0.53 0.94-1.73 1.66-3.31 1.66-3.36 0-5.76-2.64-5.76-6.22 0-3.46 2.33-6.17 5.66-6.17 2.04 0 3 0.84 3.34 1.46v-6.74zm-8.93 11.45c0 2.11 1.25 3.36 2.93 3.36 1.63 0 2.9-1.25 2.9-3.38 0-2.11-1.27-3.29-2.9-3.29-1.63 0-2.93 1.2-2.93 3.31zM137.78 31H134.68V13.62h3.14v6.86c0.53-0.84 1.82-1.61 3.58-1.61 3.46 0 5.45 2.66 5.45 6.17 0 3.58-2.21 6.24-5.57 6.24-1.63 0-2.88-0.72-3.5-1.73zm5.88-5.93c0-2.16-1.3-3.34-2.93-3.34-1.61 0-2.95 1.18-2.95 3.34 0 2.14 1.34 3.36 2.95 3.36 1.63 0 2.93-1.2 2.93-3.36zm12.91-5.93v3.22c-0.36-0.07-0.67-0.1-0.96-0.1-1.63 0-3.05 0.79-3.05 3.34V31h-3.19V19.19h3.1v1.75c0.72-1.56 2.35-1.85 3.36-1.85 0.26 0 0.5 0.02 0.74 0.05zM166.53 31c-0.05-0.24-0.1-0.79-0.1-1.27-0.65 1.1-2.02 1.58-3.26 1.58-2.86 0-4.49-2.09-4.49-4.66v-7.46h3.19v6.82c0 1.32 0.67 2.38 2.16 2.38 1.42 0 2.23-0.96 2.23-2.33v-6.86h3.19v9.67c0 0.91 0.07 1.73 0.12 2.14zm17.54-17.38v15.24c0 0.79 0.05 1.66 0.1 2.14H181.12C181.07 30.76 181 30.18 181 29.63c-0.53 0.94-1.73 1.66-3.31 1.66-3.36 0-5.76-2.64-5.76-6.22 0-3.46 2.33-6.17 5.66-6.17 2.04 0 3 0.84 3.34 1.46v-6.74zm-8.93 11.45c0 2.11 1.25 3.36 2.93 3.36 1.63 0 2.9-1.25 2.9-3.38 0-2.11-1.27-3.29-2.9-3.29-1.63 0-2.93 1.2-2.93 3.31z" id="path-3"/>
<linearGradient xlink:href="#linearGradient858" id="linearGradient3613" gradientUnits="userSpaceOnUse" gradientTransform="translate(10)" x1="78.92" y1="44.38" x2="323.81" y2="44.38"/>
</defs>
<g id="Page-1" fill="none">
<g id="block1m-dn">
<g id="Text-Copy" transform="translate(97,7)"/>
<g id="Group-Copy" transform="translate(20,7)" fill="#fff">
<g id="Oval" style="fill:#fff;stroke-width:4;stroke:#818388">
<g id="g971">
<circle r="30" cy="38" cx="20" id="circle55" fill="#fff"/>
</g>
</g>
<g id="Artboard-17#4x-Clipped" fill="#fff">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1" id="use58" x="0" y="0" width="100" height="100"/>
</mask>
<g id="g61" fill="#fff"/>
<g id="g968"/>
</g>
</g>
</g>
<!-- <text xml:space="preserve" x="84.96" y="62.37" id="text3785" style="-inkscape-font-specification:'Bahnschrift, Bold';fill:url(#linearGradient3613);font-family:Bahnschrift;font-feature-settings:normal;font-size:50.67;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-weight:bold;letter-spacing:0;line-height:1.25;text-align:start;text-anchor:start;word-spacing:0;writing-mode:lr-tb">
<tspan id="tspan850" x="84.96" y="62.37" fill="url(#linearGradient3613)">
PONENTES
</tspan>
</text> -->
<!-- Add text -->
<text x="74.96" y="62.37" id="text3785" style="font-size:50;font-weight:bold; fill:crimson">PONENTES </text>
<image y="19.55" x="16.95" id="image847" xlink:href="data:image/png;base64,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 " preserveAspectRatio="none" height="46.17" width="46.17" fill="#c83737"/>
<path d="M35.48 76.58C17.38 73.68 5.48 57 8.71 39.11 10.56 28.91 18.04 19.63 27.63 15.66c4.29-1.78 7.35-2.36 12.39-2.35 5.52 0.01 8.84 0.73 13.42 2.9 3.96 1.87 6.48 3.7 9.49 6.86 3.93 4.12 6.3 8.24 7.87 13.64 0.66 2.26 0.74 3.25 0.73 8.41-0.02 5.4-0.08 6.07-0.9 8.7C67.21 64.96 58.91 72.91 47.5 75.99 45.56 76.51 37.51 76.91 35.48 76.58ZM46.94 72.23C55.43 70.06 62.73 63.7 66.04 55.58 72.65 39.35 62.86 21.11 45.55 17.43c-1.64-0.35-3.52-0.44-6.67-0.34-3.79 0.13-4.81 0.29-7.47 1.16-4.6 1.51-7.74 3.48-11.37 7.16-3.42 3.46-5.28 6.39-6.63 10.46-2.6 7.8-1.71 16.66 2.33 23.32 4.53 7.47 11.82 12.36 20.39 13.68 2.7 0.42 7.82 0.11 10.81-0.66z" id="path862" style="fill:none;stroke-width:0.32"/>
</g>
</svg>
NOTE
If you save the file in * .svg format, then the rendering of the text size will be different even if there is only one line in the file
Why is this happening I do not know
I have a svg image of an instagram icon that I exported with clipping mask in Illustrator.
However, when I I try to display it, it doesn't show in any browser. (Other social icons showed)
I used the img tag to display the svg as it is displayed finely with other icons. Am I doing something wrong? Does img tag support clipping mask images?
Sorry that I don't have much experience with svg. Any suggestion is very appreciated! Thanks!
Here is my code:
<nav id="socialNav">
<ul>
<li><img src="../../_images/social-facebook.svg"></li>
<li><img src="../../_images/social-instagram_color-01.svg"></li>
<li><img src="../../_images/social-twitter.svg"></li>
<li><img src="../../_images/social-googleplus_test.svg"></li>
</ul>
</nav>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="56.7px" height="56.7px" viewBox="0 0 56.7 56.7" enable-background="new 0 0 56.7 56.7" xml:space="preserve">
<g>
<g>
<defs>
<path id="SVGID_1_" d="M28.2,16.7c-7,0-12.8,5.7-12.8,12.8c0,7.1,5.7,12.799,12.8,12.799C35.299,42.299,41,36.5,41,29.5
C41,22.5,35.2,16.7,28.2,16.7z M28.2,37.7C23.7,37.7,20,34,20,29.5c0-4.5,3.7-8.202,8.2-8.202c4.5,0,8.2,3.7,8.2,8.202
C36.4,34,32.7,37.7,28.2,37.7z M41.5,13.5c1.602,0,2.898,1.298,2.898,2.9s-1.298,2.9-2.898,2.9c-1.602,0-2.9-1.298-2.9-2.9
S39.899,13.5,41.5,13.5z M49,8.9C46.4,6.2,42.7,4.8,38.5,4.8H17.9c-8.7,0-14.5,5.8-14.5,14.5v20.5c0,4.302,1.4,8,4.2,10.701
C10.3,53.1,13.9,54.4,18,54.4h20.4c4.3,0,7.899-1.399,10.5-3.899C51.6,47.9,53,44.2,53,39.9V19.3C53,15.1,51.6,11.5,49,8.9z
M48.4,39.9c0,3.101-0.899,5.601-2.7,7.3c-1.8,1.7-4.3,2.6-7.3,2.6H18c-3,0-5.5-0.898-7.3-2.6c-1.8-1.8-2.7-4.3-2.7-7.4V19.3
c0-3,0.9-5.5,2.7-7.3c1.7-1.7,4.3-2.6,7.3-2.6h20.6c3,0,5.5,0.9,7.3,2.7c1.7,1.8,2.7,4.3,2.7,7.2v20.6H48.4z"/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" overflow="visible"/>
</clipPath>
<g id="LF6r1C.tif_2_" clip-path="url(#SVGID_2_)">
<image overflow="visible" enable-background="new " width="601" height="514" id="Layer_0_3_" xlink:href="B91C5780217A8A7F.png" transform="matrix(0.0961 0 0 0.1609 -2.4072 -11.1685)">
</image>
</g>
</g>
</g>
</svg>
Here'e the image with a few changes. The clip-path's coords have instead been used to create a path, which is then filled with a radial gradient. The file is now simply a filled path, rather than a clipped image. It's going to scale better, is 99% smaller (1283 bytes total vs 135Kb just for the gradient) and avoids the problem inherent with linked (vs embedded) files. Enjoy! Hit the Blue button to see it.
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 56.7 56.7" viewBox="0 0 56.7 56.7" y="0px" x="0px" width='56.7' height='56.7'>
<defs>
<radialGradient id="a" gradientUnits="userSpaceOnUse" cy="47.1" cx="16.48" gradientTransform="matrix(2.215 0 0 2.215 -20.03 -57.24)" r="25.3">
<stop stop-color="#f9d363" offset="0"/>
<stop stop-color="#f26c1f" offset=".3658"/>
<stop stop-color="#ce0665" offset=".6829"/>
<stop stop-color="#541fdb" offset="1"/>
</radialGradient>
</defs>
<path d="m28.2 16.7c-7 0-12.8 5.7-12.8 12.8s5.7 12.8 12.8 12.8 12.8-5.8 12.8-12.8-5.8-12.8-12.8-12.8zm0 21c-4.5 0-8.2-3.7-8.2-8.2s3.7-8.202 8.2-8.202 8.2 3.7 8.2 8.202c0 4.5-3.7 8.2-8.2 8.2zm13.3-24.2c1.602 0 2.898 1.298 2.898 2.9s-1.298 2.9-2.898 2.9c-1.602 0-2.9-1.298-2.9-2.9s1.299-2.9 2.9-2.9zm7.5-4.6c-2.6-2.7-6.3-4.1-10.5-4.1h-20.6c-8.7 0-14.5 5.8-14.5 14.5v20.5c0 4.302 1.4 8 4.2 10.7 2.7 2.6 6.3 3.9 10.4 3.9h20.4c4.3 0 7.899-1.399 10.5-3.899 2.7-2.6 4.1-6.3 4.1-10.6v-20.6c0-4.2-1.4-7.8-4-10.4zm-0.6 31c0 3.101-0.899 5.601-2.7 7.3-1.8 1.7-4.3 2.6-7.3 2.6h-20.4c-3 0-5.5-0.898-7.3-2.6-1.8-1.8-2.7-4.3-2.7-7.4v-20.5c0-3 0.9-5.5 2.7-7.3 1.7-1.7 4.3-2.6 7.3-2.6h20.6c3 0 5.5 0.9 7.3 2.7 1.7 1.8 2.7 4.3 2.7 7.2v20.6h-0.2z" fill-rule="evenodd" fill="url(#a)"/>
</svg>
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'm only new to Inline SVG and from my reading it sounds really interesting. I expecially like the way it can maintain multiple colors (which are currently lost ith icon fonts).
Following is an graphic created in Adobe Illistrator and exported as an SVG:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="265.427px" height="105.59px" viewBox="0 0 265.427 105.59" enable-background="new 0 0 265.427 105.59"
xml:space="preserve">
<g id="Edit_Button_1_">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="132.7144" y1="10.8496" x2="132.7144" y2="90.4107">
<stop offset="0.099" style="stop-color:#F5F6F6"/>
<stop offset="0.8267" style="stop-color:#E9E9E9"/>
</linearGradient>
<rect x="0.474" y="0.474" fill="url(#SVGID_1_)" stroke="#CDCCCC" stroke-width="0.9479" stroke-miterlimit="10" width="264.479" height="104.643"/>
<g>
<g>
<g>
<g>
<polygon fill="#6F6F6F" points="27.945,62.067 20.953,83.479 42.234,76.368 "/>
</g>
<g>
<path fill="#6F6F6F" d="M67.206,22.81c3.765-3.827,9.988-3.805,14.024,0.166c4.024,3.969,4.154,10.186,0.39,14.013
L67.206,22.81z"/>
</g>
<polygon fill="#6F6F6F" points="45.999,72.609 31.698,58.312 62.865,27.153 77.16,41.45 "/>
</g>
</g>
</g>
<text transform="matrix(1 0 0 1 100.8813 74.3232)" fill="#6F6F6F" font-family="'Verdana'" font-size="57.8802">EDIT</text>
</g>
</svg>
I'm confussed on how to put this onto a HTML page. Do I just copy the <svg> to </svg> tags?
Is there any conversion/optimisation required?
I've also read about defining SVG Files for later use: http://css-tricks.com/svg-sprites-use-better-icon-fonts/
What are the advantages/disadvantages of this?
thankyou so much!!
Yes. You only need to copy the <svg> section. The XML pre-amble lines (<?xml> and <!DOCTYPE>) are not required.
Demo here