How to trim a svg image in markdown file
I have a svg file, made by Google Drawings. (The png version is shown below
and the svg code is below
<svg version="1.1" viewBox="0.0 0.0 960.0 720.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><clipPath id="p.0"><path d="m0 0l960.0 0l0 720.0l-960.0 0l0 -720.0z" clip-rule="nonzero"/></clipPath><g clip-path="url(#p.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l960.0 0l0 720.0l-960.0 0z" fill-rule="evenodd"/><path fill="#999999" d="m393.1811 309.8189l0 0c0 -37.33795 30.268372 -67.60631 67.60632 -67.60631l0 0c17.930298 0 35.12622 7.1227875 47.80487 19.801437c12.67865 12.678619 19.801392 29.874542 19.801392 47.80487l0 0c0 37.33792 -30.268341 67.60629 -67.60626 67.60629l0 0c-37.33795 0 -67.60632 -30.268372 -67.60632 -67.60629z" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m393.1811 309.8189l0 0c0 -37.33795 30.268372 -67.60631 67.60632 -67.60631l0 0c17.930298 0 35.12622 7.1227875 47.80487 19.801437c12.67865 12.678619 19.801392 29.874542 19.801392 47.80487l0 0c0 37.33792 -30.268341 67.60629 -67.60626 67.60629l0 0c-37.33795 0 -67.60632 -30.268372 -67.60632 -67.60629z" fill-rule="evenodd"/></g></svg>
My purpose is to insert this svg image into a markdown file my_work.md. As you can see, there are lots of white space in the image, I want to trim them off and only show the useful part. In this example, the useful part is just the grey circle.
I have some general ideas, but don't know to to realise them.
- Direct method: use some markdown tricks to trim it.
- Indirect method: load this image in Python and trim it using some Python library, export the trimmed svg-image and use it in md-file.
- Indirect method: trim it in Google Drawings.
Could you please tell me how to do it? Any method is welcomed. I just need to only show the useful part of the image. Please note that I have many svg-files, and the useful part may not be in the center of the image.
To your example I've added ids in order to be able to talk about your paths.
Path a and b are identical and they arte large rectangles that cover the whole svg canvas. Path a is not visible since is inside a clipPath and path b is transparent: fill-opacity="0.0"
Also path c and path d are identical. You may remove one of then and add both the stroke and the fill to the same path. Alternatively you put the path c inside a <defs> and use it twice: once for the fill and once for the stroke if this is what you need.
<svg version="1.1" viewBox="0.0 0.0 960.0 720.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
<clipPath id="p.0">
<path id="a" d="m0 0l960.0 0l0 720.0l-960.0 0l0 -720.0z" clip-rule="nonzero"/></clipPath>
<g clip-path="url(#p.0)">
<path id="b" fill="#000000" fill-opacity="0.0" d="m0 0l960.0 0l0 720.0l-960.0 0z" fill-rule="evenodd"/>
<path id="c" fill="#999999" d="m393.1811 309.8189l0 0c0 -37.33795 30.268372 -67.60631 67.60632 -67.60631l0 0c17.930298 0 35.12622 7.1227875 47.80487 19.801437c12.67865 12.678619 19.801392 29.874542 19.801392 47.80487l0 0c0 37.33792 -30.268341 67.60629 -67.60626 67.60629l0 0c-37.33795 0 -67.60632 -30.268372 -67.60632 -67.60629z" fill-rule="evenodd"/>
<path id="d" stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m393.1811 309.8189l0 0c0 -37.33795 30.268372 -67.60631 67.60632 -67.60631l0 0c17.930298 0 35.12622 7.1227875 47.80487 19.801437c12.67865 12.678619 19.801392 29.874542 19.801392 47.80487l0 0c0 37.33792 -30.268341 67.60629 -67.60626 67.60629l0 0c-37.33795 0 -67.60632 -30.268372 -67.60632 -67.60629z" fill-rule="evenodd"/>
</g>
</svg>In order to remove the white space you may delete path b,get the size of path c and use it for the viewBox attribute: in this case viewBox="391 240 139 139"
<svg version="1.1" viewBox="391 240 139 139" stroke-miterlimit="10" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
<path fill="#999999" stroke="black" d="m393.1811 309.8189l0 0c0 -37.33795 30.268372 -67.60631 67.60632 -67.60631l0 0c17.930298 0 35.12622 7.1227875 47.80487 19.801437c12.67865 12.678619 19.801392 29.874542 19.801392 47.80487l0 0c0 37.33792 -30.268341 67.60629 -67.60626 67.60629l0 0c-37.33795 0 -67.60632 -30.268372 -67.60632 -67.60629z" fill-rule="evenodd"/>
</svg>- Google App Engine is sending SVG with wrong mime-type
- Lost information after reading Svg with Svg.Net
- CSS - how to have or mimic a border with a radius that applies inside only
- How to Make an SVG Image Dynamically Match the Height (1em) and the Baseline of Surrounding Text?
- After increasing the stroke-width attribute, the icon is cropped
- How to find correct values for width, height and viewBox with react-native-svg
- Scaling the filling portion of an SVG path
- How to calculate the SVG Path for an arc (of a circle)
- 'Error: Plugin name should be specified' @svgr/webpack svgoConfig
- Having trouble nonuniformly scaling feImage from data uri in svg
- How can I have an SVG polyline points in percentages?
- SVG Draw a circle with 4 sectors
- Linear gradients in SVG without defs
- How can I change the color of an 'svg' element?
- How to wrap the text around svg in flutter?
- React Native SVG stacking circles not showing inner half
- Why doesn't hue rotation by +180deg and -180deg yield the original color?
- Can I make one SVG filter with multiple effects?
- Get absolute coordinates of element inside SVG using JS
- Move stroke gradient definition from SVG to CSS
- Doughnut chart with rounded corners - is it possible?
- How can I draw an SVG over what already exists in a canvas?
- How can I change the color of the svg?
- Overlaying a div with an svg using CSS grid layout when div size is unknown ahead of time
- Animate SVG along path horizontally responsive
- How to embed AI (Adobe Illustrator) / SVG / PDF files into a PDF directly in iText Java to avoid rendering glitch?
- Some SVGs work in Nextjs and some not, why?
- Change color of svg ( icon) via css in angular 8
- SVG: How can I display multiple paths and rotate them around the center?
- Different results based on browser when drawing an SVG Icon