2

I'm trying to export a pretty simple icon I made in illustrator to svg for use on a webpage, but when I export it, two of the thick curved lines in my graphic are tossed off to the side and rotated away.

This is what it looks like in illustrator Illustrator View of SVG Image

And this is what is looks like exported Illustrator Exported SVG Image

For reference here is what the anchor points for the paths look like in illustrator and I'll give a description below Lines Anchor Points Phone Anchor Points

The shape consists of 2 compound paths, each as a clipping mask to simple rectangles with a gradient for coloring:

  1. the 3 lines in top right (as one compound path) This is just 3 paths with thick stroke that I used expand appearance on and made into compound path for clipping mask.

  2. the phone object (with the disconnected speaker portions) This is more complicated but was built with shape builder tool, cut with some thick lines and made into compound path for clipping mask.

Things I have attempted to fix this:

  1. expand appearance
  2. make everything one compound path and put the clipping mask on all together with a less appealing gradient
  3. use simplify tool on lines
  4. increase decimal places on svg export
  5. use "save as" instead of export artboard
  6. search stackexchange for similar issues
  7. wonder why I'm spending so much time on this
  8. rethink my life choices

Code of svg file:

<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
  <defs>
    <style>
      .cls-1 {
        fill: url(#linear-gradient-2);
      }

      .cls-2 {
        clip-path: url(#clippath-1);
      }

      .cls-3 {
        clip-path: url(#clippath);
      }

      .cls-4 {
        fill: none;
      }

      .cls-5 {
        fill: url(#linear-gradient);
      }
    </style>
    <clipPath id="clippath">
      <path class="cls-4" d="m220.757,381.513l21.119-25.22,125.015,59.463c.571,4.622.715,9.35.423,14.081-.235,4.475-.849,8.999-1.861,13.5-.599,2.663-1.327,5.262-2.165,7.801l-142.53-69.626Zm-108.896-171.933l31.887-8.329-.238-138.436c-3.934-2.494-8.145-4.649-12.545-6.409-4.145-1.703-8.497-3.084-12.998-4.096-3.137-.705-6.27-1.199-9.391-1.531l3.285,158.8Zm98.074,184.856l-.015.019c-63.537-39.472-105.865-106.305-114.345-180.623l.007-.032h.001s-3.374-163.11-3.374-163.11c-34.254,3.278-64.04,28.089-71.999,63.492-39.639,176.325,71.16,351.388,247.485,391.027,35.891,8.069,71.557-8.786,88.929-39.116l-146.689-71.657Z"/>
    </clipPath>
    <linearGradient id="linear-gradient" x1="-61.788" y1="294.859" x2="531.414" y2="294.859" gradientTransform="translate(-28.517 .542) scale(.925 1)" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#2b559a"/>
      <stop offset=".263" stop-color="#2e74b4"/>
      <stop offset=".551" stop-color="#328fcb"/>
      <stop offset=".807" stop-color="#34a0d9"/>
      <stop offset="1" stop-color="#35a6de"/>
    </linearGradient>
    <clipPath id="clippath-1">
      <path class="cls-4" d="m274.818,108.322,93.449,169.235c-5.192-.831-8.728-5.714-7.897-10.906,9.54-59.617-31.201-115.882-90.818-125.423-5.192-.831-8.728-5.714-7.897-10.906s5.714-8.728,10.906-7.897c69.985,11.2,117.812,77.249,106.613,147.235-.831,5.192-5.714,8.728-10.906,7.897Zm54.035,8.647c-5.192-.831-8.728-5.714-7.897-10.906,14.308-89.412-46.793-173.795-136.206-188.103-5.192-.831-8.728-5.714-7.897-10.906.831-5.192,5.714-8.728,10.906-7.897,99.781,15.968,167.968,110.136,152.001,209.916-.831,5.192-5.714,8.728-10.906,7.897Zm-143.724-201.387,207.211,211.547c-5.192-.831-8.728-5.714-7.897-10.907,19.911-124.42-65.114-241.841-189.534-261.752-5.192-.831-8.728-5.714-7.897-10.906s5.714-8.728,10.906-7.897c134.788,21.57,226.898,148.776,205.328,283.564-.831,5.193-5.714,8.729-10.906,7.898Z"/>
    </clipPath>
    <linearGradient id="linear-gradient-2" x1="465.671" y1="347.081" x2="313.48" y2="-34.829" gradientTransform="matrix(1, 0, 0, 1, 0, 0)" xlink:href="#linear-gradient"/>
  </defs>
  <g class="cls-3">
    <rect class="cls-5" x="-85.68" y="-15.282" width="548.8" height="621.366" transform="translate(-15.833 580.068) rotate(-111.727)"/>
  </g>
  <g class="cls-2">
    <rect class="cls-1" x="239.366" y="-5.295" width="300.418" height="322.842"/>
  </g>
</svg>

EDIT: Solved, kinda. figured out a workaround. details of how i made these line the first time and the second time that worked below:

A - Broken method

  1. create 3 circles with thick black stroke
  2. make interecting lines with line tool at 90 deg ngle to give me intersecting anchor points
  3. use scissor tool to cut circles to 1/4 circles at intersecting points
  4. group lines
  5. give stroke round cap
  6. expand appearance
  7. turn lines into compound path
  8. put square with gradient behind lines
  9. clipping mask compound path (lines) with gradient behind
  10. export - broken file

B - working method

  1. create 3 circles with thick black stroke
  2. make interecting lines with line tool at 90 deg ngle to give me intersecting anchor points
  3. use scissor tool to cut circles to 1/4 circles at intersecting points
  4. give each line's stroke round cap individually
  5. expand appearance on each line
  6. put 3 identical squares with the same gradient on top of each other behind lines
  7. clipping mask each line individually with it's own gradient square
  8. export - svg file works
6
  • Hi. Welcome to GDSE. It's hard to answer this without access to the file. The only thing I can think of is that you could have some unexpected transform going on. Have you checked the SVG file for any anomalies? Are there excessive nested groups? Perhaps try ungrouping everything repeatedly until there are no groups left.
    – Billy Kerr
    Feb 26, 2023 at 16:26
  • @BillyKerr Thanks for taking the time to answer, I've updated my post to include the svg code. I tried ungrouping everything but that didn't seem to work, and couldn't ungroup the 3 lines as they were a compound path. I did find a workaround for this problem though, I made a new set of lines the same way I did the first set, but didn't ever group any of them or turn them into a compound path and now the SVG export works fine. Full details in post edit for anyone wondering how to get around this issue Feb 26, 2023 at 18:27
  • @Thunderbird - then I suspect I may have been right. There is a transform in your SVG. I can't tell you specifically what went wrong the first time, but excessive grouping has caught me out before. It's often a good idea to try to keep the construction of an SVG as simple as possible. Also note that not all software (such as browsers) will render an SVG the same. Glad you found a solution.
    – Billy Kerr
    Feb 26, 2023 at 18:36
  • @BillyKerr thanks for the help! I would mark your comment as the right answer but it's not letting me for some reason, I'll credit you if you let me know how, I'm new to this site :) Feb 26, 2023 at 18:42
  • I haven't added an answer, it's just a comment, because I was simply making a guess. But you can choose your own answer as best. You may have to wait a while though before you can do so. Someone else may be able to shed more light on it.
    – Billy Kerr
    Feb 26, 2023 at 18:44

1 Answer 1

1

Solved, kinda. figured out a workaround. details of how i made these line the first time and the second time that worked below:

shoutout to @BillyKerr who pointed out excessive grouping was probably what caused the issue here.

A - Broken method

  1. create 3 circles with thick black stroke
  2. make interecting lines with line tool at 90 deg ngle to give me intersecting anchor points
  3. use scissor tool to cut circles to 1/4 circles at intersecting points
  4. group lines
  5. give stroke round cap
  6. expand appearance
  7. turn lines into compound path
  8. put square with gradient behind lines
  9. clipping mask compound path (lines) with gradient behind
  10. export - broken file

B - working method

  1. create 3 circles with thick black stroke
  2. make interecting lines with line tool at 90 deg ngle to give me intersecting anchor points
  3. use scissor tool to cut circles to 1/4 circles at intersecting points
  4. give each line's stroke round cap individually
  5. expand appearance on each line
  6. put 3 identical squares with the same gradient on top of each other behind lines
  7. clipping mask each line individually with it's own gradient square
  8. export - svg file works

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.