html - How do I control the spacing around my external svg -
how can control position , space around .svg. right when page renders space around right , bottom of .svg? markup , styling looks such:
<style> .fill-extra { fill: #686868; } </style> in <body> have:
<svg class="fill-extra" width="150" height="150" viewbox="0 0 100 100"> <use xlink:href="svg_icons/extra_closed.svg#layer_1"></use> </svg> the svg looks this
<?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" enable-background="new 0 0 49.68 49.68" xml:space="preserve"> <path d="m48.998,24.754c0,13.408-10.87,24.279-24.279,24.279c-13.41,0-24.279-10.871-24.279-24.279 c0-13.409,10.87-24.279,24.279-24.279c38.128,0.475,48.998,11.345,48.998,24.754z m24.715,38.347h13.527l4.445-17.837l-1.871-3.976 h-1.641l-0.467,2.572h24.715h-13.99l-0.466-2.572h8.62l-1.871,3.976l4.445,17.837h24.715z m24.717,28.697h4.93l1.666-1.053v23.96 h-1.754v2.456h-4.842h19.88v23.96h-1.755v3.685l1.667,1.053h24.717z m24.717,17.074h12.209v-3.07h24.717h12.51v3.07h24.717z m24.717,11.942h7.999v9.837h-7.999h-7.996v2.105h24.717z"/> </svg>
your viewbox 0,0 100,100 path's bounds 0,0 50,50.
you make viewbox smaller e.g. viewbox="0 0 50 50" keep drawing same size make contents bigger. or make width , height smaller in conjunction adjusting viewbox dimensions keep drawing same size whilst getting rid of empty space round it.
Comments
Post a Comment