Welcome to TalkGraphics.com
Results 1 to 5 of 5
  1. #1
    Join Date
    Sep 2021
    Posts
    19

    Default How to get clean SVG exports?

    A clean svg file looks something like:

    HTML Code:
    <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M22 13c-.027-5.497-4.497-10-10-10s-9.973 4.503-10 10h2.5c.828 0 1.5.672 1.5 1.5v7c0 .828-.672 1.5-1.5 1.5h-3c-.828 0-1.5-.672-1.5-1.5v-8.5c.027-6.601 5.394-12 12-12s11.973 5.399 12 12v8.5c0 .828-.672 1.5-1.5 1.5h-3c-.828 0-1.5-.672-1.5-1.5v-7c0-.828.672-1.5 1.5-1.5h2.5z"/></svg>
    How can I achieve this clean export in Xara? Xara adds backgrounds, doctypes, comments, xml data, unnecessary shadows(?), spammy group layers etc.

    Click image for larger version. 

Name:	eab70071cac048e87ce2dd3cb5cc9478.jpg 
Views:	49 
Size:	41.5 KB 
ID:	132640

    The above image exported as an svg resolves to:

    HTML Code:
    <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <!--Generator: Xara Designer (www.xara.com), SVG filter version: 6.1.0.18-->
    <svg stroke-width="0.501" stroke-linejoin="bevel" fill-rule="evenodd" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" overflow="visible" width="206.517pt" height="211.049pt" viewBox="0 0 206.517 211.049">
     <defs>
      <image id="Bitmap" preserveAspectRatio="none" width="1" height="1" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAdAAAAEdCAYAAAC8KzZqAAAACXBIWXMAAA7DAAAOwwHHb6hkAAACGElEQVR4nO3BMQEAAADCoPVPbQo/IAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA4KEGE9UAAfny2zMAAAAASUVORK5CYII=">
       <title>1</title>
      </image>
     </defs>
     <g id="Document" fill="none" stroke="black" font-family="Times New Roman" font-size="16" transform="scale(1 -1)">
      <g id="Spread" transform="translate(0 -211.049)">
       <g id="Page background">
        <use transform="translate(-1.431 213.069) scale(348 -213.75)" xlink:href="#Bitmap" stroke-width="0" fill="none" stroke="none" stroke-miterlimit="79.8403193612775"/>
        <g id="Shadow" stroke="none" stroke-width="0" stroke-miterlimit="79.8403193612775">
         <path d="M -0.001,211.048 L -0.001,-0.001 L 206.516,-0.001 L 206.516,211.048 L -0.001,211.048 Z" marker-start="none" marker-end="none"/>
        </g>
       </g>
       <g id="Layer 1">
        <g id="Group" fill-rule="evenodd" stroke-linejoin="miter" stroke="none" stroke-width="0.037" fill="#000000" stroke-miterlimit="79.8403193612775">
         <g id="Group_1">
          <g id="Group_2">
           <path d="M 71.031,-0.403 C 69.498,0.218 67.891,2.519 65.444,7.631 C 60.769,17.273 57.409,21.619 46.526,31.881 C 33.051,44.626 26.623,51.346 23.738,55.655 C 17.055,65.735 12.49,78.48 10.773,91.993 C 9.568,101.488 9.897,100.465 8.034,101.451 C 5.77,102.693 2.958,105.615 1.351,108.354 L 0,110.654 L 0,154.515 L 0,198.376 L 1.315,200.713 C 4.748,206.885 9.897,209.514 17.749,209.149 C 21.839,208.93 23.994,208.017 27.463,205.095 C 28.778,203.963 29.946,203.014 30.056,203.014 C 30.129,203.014 32.758,204.474 35.899,206.227 C 43.167,210.391 44.664,210.865 49.85,210.829 C 58.724,210.792 63.545,207.688 67.416,199.544 C 70.118,193.847 71.324,188.369 71.981,178.545 C 72.821,165.69 71.36,154.223 67.781,145.75 C 64.056,136.912 57.921,132.895 48.754,133.37 C 44.554,133.553 43.276,134.027 37.068,137.46 L 33.051,139.724 L 32.795,127.636 C 32.685,120.99 32.466,114.526 32.32,113.284 C 31.845,108.865 28.303,103.789 24.213,101.744 C 22.715,100.977 22.387,100.648 22.496,99.954 C 22.569,99.479 22.788,97.726 23.044,96.01 C 24.213,87.391 26.988,77.823 30.275,70.994 C 33.927,63.471 35.899,61.17 54.743,42.325 C 69.351,27.754 71.47,25.051 76.765,14.497 C 79.468,9.129 79.76,8.362 79.906,6.025 C 80.198,1.204 78.518,-0.768 74.136,-0.732 C 72.821,-0.732 71.433,-0.586 71.031,-0.403 Z" marker-start="none" marker-end="none"/>
           <path d="M 129.829,-0.147 C 129.427,-0.038 128.697,0.4 128.258,0.802 C 125.337,3.505 125.702,6.938 129.865,15.666 C 134.941,26.293 137.936,29.836 160.542,51.857 C 167.116,58.285 169.051,60.403 170.987,63.361 C 175.223,69.716 178.108,76.143 180.263,83.958 C 181.687,89.071 183.44,99.078 183.111,100.1 C 183.002,100.465 181.76,101.524 180.372,102.474 C 177.67,104.227 175.442,106.783 174.383,109.34 C 173.799,110.837 173.214,120.99 172.995,134.429 L 172.922,139.834 L 169.453,137.825 C 163.865,134.612 160.798,133.553 156.488,133.333 C 153.238,133.187 152.508,133.297 149.988,134.137 C 142.501,136.657 138.52,141.587 135.854,151.776 C 132.422,164.923 132.823,183.549 136.804,195.527 C 138.301,200.019 140.127,203.306 142.611,205.789 C 146.226,209.441 150.243,211.048 155.685,211.048 C 160.286,211.048 162.441,210.245 171.352,205.314 L 175.661,202.941 L 177.56,204.657 C 181.358,208.09 184.207,209.222 189.028,209.222 C 196.587,209.222 201.737,206.191 205.243,199.727 L 206.521,197.353 L 206.521,154.625 C 206.521,121.245 206.411,111.567 206.046,110.362 C 205.425,108.281 202.723,104.738 200.422,102.985 C 199.363,102.182 198.121,101.232 197.646,100.867 C 196.953,100.283 196.733,99.516 196.113,94.586 C 193.921,78.006 190.123,67.05 182.71,55.838 C 179.569,51.127 173.58,44.882 160.652,32.867 C 153.384,26.111 148.856,21.253 146.336,17.528 C 145.569,16.396 143.56,12.708 141.844,9.311 C 137.534,0.802 137.279,0.474 135.088,-0.001 C 133.225,-0.403 131.143,-0.476 129.829,-0.147 Z" marker-start="none" marker-end="none"/>
          </g>
         </g>
        </g>
       </g>
      </g>
     </g>
    </svg>
    Edit: Hiding the page background does to remove the shadow however there is still a lot of other junk in the export.

    How am I able to achieve minimalist, truly clean exports?

    Kind regards

    Jack
    Last edited by filetoolarge; 19 August 2022 at 12:33 PM.

  2. #2
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,809

    Default Re: How to get clean SVG exports?

    Jack the Export as SVG is trying to be as compatible as possible for older graphics packages.
    You are also using a version 12 product from your entered TG account details.

    In XPro+ and those applications that now handle SVG rendering, you can Preview and extract the pure SVG from the browser's Dev Tools > Elements view.

    If you don't have SVG rendering yet, you can use https://svgomg.netlify.app.

    Acorn
    Last edited by Acorn; 19 August 2022 at 03:21 PM.
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  3. #3
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,910

    Default Re: How to get clean SVG exports?

    Filetoolarge, I'm not 100% what your problem is here and it would be of great help to view your xar/web file to comment further.

    One thing I notice that your screenshot includes a shadow group. Unless there's been any recent changes, which I don't believe there has, Xara exports shadows as bitmaps. Not ideal if you're working in vector shapes.

    So if you want to create shadows using Xara's shadow tool you're better off using the old fashioned Xara way to create shadows or other svg software that can create vector shadows (& blurs etc)

    I attach a xar file that only creates vector shapes but as I'm not totally understanding your goal I may be way off target
    Attached Files Attached Files
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  4. #4
    Join Date
    Sep 2021
    Posts
    19

    Default Re: How to get clean SVG exports?

    Quote Originally Posted by Acorn View Post
    Jack the Export as SVG is trying to be as compatible as possible for older graphics packages.
    You are also using a version 12 product from your entered TG account details.

    In XPro+ and those applications that now handle SVG rendering, you can Preview and extract the pure SVG from the browser's Dev Tools > Elements view.

    If you don't have SVG rendering yet, you can use https://svgomg.netlify.app.

    Acorn
    A-Ha. That svg rendering link is perfect for what I need - thank you.

    The only data I really needed in the original svg export was the data in #Group_2 but it's plugged in extra layers of groupings which I am unable to stop from Xara Designer X Pro 12 exports.

    Not much of a fan with updating software. I have never looked back from using Xara and have always recommended it to others for the past 13 years. I did look at updating at one point but what I have is essentially perfection for me now.

    Thanks again

  5. #5
    Join Date
    Sep 2021
    Posts
    19

    Default Re: How to get clean SVG exports?

    Quote Originally Posted by Egg Bramhill View Post
    Filetoolarge, I'm not 100% what your problem is here and it would be of great help to view your xar/web file to comment further.

    One thing I notice that your screenshot includes a shadow group. Unless there's been any recent changes, which I don't believe there has, Xara exports shadows as bitmaps. Not ideal if you're working in vector shapes.

    So if you want to create shadows using Xara's shadow tool you're better off using the old fashioned Xara way to create shadows or other svg software that can create vector shadows (& blurs etc)

    I attach a xar file that only creates vector shapes but as I'm not totally understanding your goal I may be way off target
    That's really smart how you added a blend to create vector shadows.

    Definitely food-for-thought in the future.

    Thank you for the advise

 

 

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •