Hey guys;
I am a software engineer, working with our UI team to get some SVGs rendered into PNGs to save some bandwidth. The conversion seems to work fine, with the exception of our clipping masks defined in the <defs><clipPath ..> section of our SVGs don't seem to have any effect on the resulting PNGs. I apologize that I am not super-versed in SVG or Magick, but I have a strong knowledge of XML and .Net. Anyway, below is what my <defs> element looks like.
Dave
I am a software engineer, working with our UI team to get some SVGs rendered into PNGs to save some bandwidth. The conversion seems to work fine, with the exception of our clipping masks defined in the <defs><clipPath ..> section of our SVGs don't seem to have any effect on the resulting PNGs. I apologize that I am not super-versed in SVG or Magick, but I have a strong knowledge of XML and .Net. Anyway, below is what my <defs> element looks like.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xml:space="preserve" preserveAspectRatio="none" angle="Front" class="root-svg" opacity="1" width="800" height="800" viewBox=" 0 100 1200 1200">
<defs clipping-regions="" angle="Front" style-path-count="sharedCount" ud-data="uniformDesign" garment="Jersey" defs-loaded="defsStatus" inwidth="width" inheight="height" id="defs018"><clipPath id="clip0018"><path fill="#6FCCDD" d="..." display="inline"></path></clipPath></defs>
<!-- SVG Content -->
</svg>
For the code, all I am doing is reading in the SVG content, and then writing it as a PNG:using (var jersey = new MagickImage()){
jersey.Read(@"D:\dev\SVG\baseball-jersey.svg");
jersey.Write(@"D:\dev\SVG\baseball-jersey.png");
}
I have also tried rendering the path element as a separate SVG, and then loading it as a ClipMask using the ClipMask property, but that doesn't seem to work either. I am certain that it's just me doing something stupid, but any help that you could provide would be awesome. Thank you!Dave