I work on a software design team that is refreshing their library of illustrations (all SVG). Currently the style is very flat shapes and the new style is chock full of gradients and blurs, increasing the file size dramatically. I'm wondering if anyone has strategies for using a range of rich, gradient driven illustration in product design while also keeping file size down and usable across all platforms (web, native mobile, etc)?

I'd like maintain our use of vector graphics, but maybe software teams are using bitmap PNGs in this scenario? I dunno but it feels like a step backwards for me. Any advice or experiences greatly appreciated. Cheers.

I'm looking for suggestions for a code editor. I would like to enter SVG code, and be able to see it right away in an adjacent preview window.

• I can also edit the image in the preview window
• Preferably a windows download. Otherwise maybe online.
• Preferably free

I have a pretty basic animation that I'm trying to improve https://precept.sh/images/animated.svg

Right now each animated "spark" starts off in the color that it ends with. What I'm really hoping to do is have them all start as white until the enter the "precept" box, do the transition from white to their respective colors within the box, and finish their journey completely in their final color. However if I transform the colors in transit then the tail also transforms and the effect is lost.

One thing I was thinking was to make the path static with the gradient in place but with an opacity of 0 for its entirety, then have a box with a rgba(0,0,0,0);rgba(0,0,0,0.8);rgba(0,0,0,0) gradient follow it, applying a feCompose:lighter filter so that the alpha channel of the box merges with the invisible path underneath as it moves, and the resulting color will be what I'm looking for. But I can't seem to make it work. I'm not even sure it can work - and if so why not?

Codepen of my idea - The codepen has two copies of what I'm trying to do - one as a reference with full color, and one with ever so slight colors just so we know they're actually there

i want to make a button on the top of a website with the following form:
https://yqnn.github.io/svg-path-editor/#P=M_0_0_C_10_0_27_0_50_30_C_50_30_70_60_100_60_H_300_C_307_60_328_61_350_30_C_350_30_373_0_400_0

do i need svg to achieve this?

thanks in advance.

Hey guys, my name is Juan and I just released a very simple online tool that lets you change the colors of your SVG animation quick and easy. I needed this tool for my work, but I think more people will enjoy it.

I just spent a couple of hours on it today and I'm thinking about adding batch processing and other features.

Anyways here it is https://www.temperamento.net/color-me-bad/

I have a simple rectangle, see code below.

Within it, I would like to dedicate a rectangular area of a fixed size (slightly smaller than the rectangle). In this area, I want to be able to put any SVG object and make it scale with the "outer" rectangle.

I have tried making a <g> tag, <svg> within the outer <svg> etc, but since the images almost always contain fixed x-y values and whatnot, it always ends up outside of my viewBox. I want to draw the image inside relative to the outer rectangle if that makes sense. I have googled around a bit but haven't found anything useful.

The reason is I have a Power BI that should dynamically change the "inner" SVG object based on certain criteria, and I don't want to custom make every inner object relative to the outer object as I have dozens of objects.

TLDR: How can I designate an area within my rectangle (or within my <svg> in general) that will scale any SVG put inside of it regardless of dimensions etc of this object?

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
    <rect x="10" y="10" width="480" height="480" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"/>
  
</svg>

https://github.com/metaory/glitcher-cli

I have svg file and I have to convert it to square size (without reshaping) and center within this square area and convert to transparent file (for google search). Now its 85x65 px and I want to make it for exmaple 85x85 px and center it vertically since the height is smaller than width. Is there any online tool to do it?

I have a 137MB SVG that I would like to significantly decrease the size of, every time I open it on Inkscape it struggles and using the "simplify" tool makes it have the wrong shapes, is there a way to compress this file while still keeping the shapes?

What you get:

-> Unlimited searches & downloads
-> No licensing fees - 100% FREE
-> Copy & paste ready-to-use icons
-> Organized icons collections

Perfect for: developers, designers & creators

Check This Out --> Free SVG Icons
#freesvgicon #svg

Hi guys! I’ve implemented the smallest SVG analog clock I could make. Is there a way to make it even smaller or simpler? Alternatively, without adding too much complexity, how can I make it look more appealing? Do you have any suggestions for improvement?

Here’s the CodeSandbox.

Edit: Improved code after suggestions:

const AnalogClock = ({ date = new Date() }) => (
  <div
    mount={(self) => {
      const timerId = setInterval(() => {
        date = new Date();
        update(self);
      }, 1000);

      return () => clearInterval(timerId);
    }}
  >
    <svg viewBox="-50 -50 100 100">
      <circle class="face" r="48" />
      <line
        class="hour"
        transform={() =>
          `rotate(${30 * (date.getHours() % 12) + date.getMinutes() / 2})`
        }
        y2="-25"
      />
      <line
        class="minute"
        transform={() => `rotate(${6 * date.getMinutes()})`}
        y2="-35"
      />
      <line
        class="second"
        transform={() => `rotate(${6 * date.getSeconds()})`}
        y2="-35"
      />
    </svg>
  </div>
);

Made with Fusor library

I found some Christmas svg from here. but I need more can anyone suggest place to find them.

There is a benchmark rectangle in tbe svg of size 5in x 4n. When I load it in the browser and measure the value it is coming as 14.7in something in width and similarly some higher value in heigh. How to render a svg 1:1 in TV browsers?

I would prefer if the handmaid had her hands in the air as if she was holding a sign for protest. I am willing to pay for the SVG file if someone is able to make this.

I'm not sure if it's impossible or if I'm just not googling the right quesiton. Essentially My goal is to do a path with multiple cubic curves between points but I want the stroke with to taper up/down or sometimes to be wider in the center. If it's impossible I'll probably have to instead drawn the outline of the outline and then do a fill.

Does anybody know how to convert an SVG to DXF in an automatic way? Programatically or via a command line? I don't care if it's a paid service, or open source.

I've tried a number of online APIs and so far nothing works that retains the layer names to the DXF except manually doing it through Adobe Illustrator. But I need a way to do it in an automated fashion.

I was trying to do this in Inkscape but nobody could help. It seems that it might be a problem with the SVG specification. I can't seem to manually code an SVG file that does not force the (0, 0) coordinates to the corner of the page. is there a way to make this happen, or do I have to just go with the flow? Drawing a symmetrical, mostly, bolt circle, and this should be simple, and yeah I COULD use all positive values but I know this will come up again and again. Graphing functions is another area where one must often draw with negative value coordinates.

Or does an SVG have to start life as an SVG to be scalable?

HI! I have absolutely no idea how to really use svg files and need some help editing a playing card box template. I have purchased a custom deck of poker sized playing cards as a gift for my husband. I didn't like the box options they came with so I figured I could just make my own tuck box. This is proving much more difficult than I thought. I have downloaded a temple but the deck is about twice as thick as a normal deck. I don't know how to adjust the measurements on the template to match what I need. I would really appreciate any help!

I'm working on a project involving Content-Based Image Retrieval (CBIR) and I'm specifically looking for datasets in SVG format. Most datasets I’ve found are in raster formats (like JPG or PNG), but I need scalable vector graphics for my experiments. Has anyone come across an SVG dataset suitable for CBIR? Any suggestions or research papers on SVG-based image retrieval would be greatly appreciated!

Just wondering what other SVG fans have found.

I have been working on a visualization of Saturn's rings from Voyager data. Everything that isn't text in this SVG file is just a distorted circle. Sounds simple and unambiguous, right. Compare these results.

Chrome is best. Everything you see pretty much matches my intentions.

https://preview.redd.it/557rbtp8uikd1.png?width=1920&format=png&auto=webp&s=feefe82345cd0c63a47a2d77b0ab2ddb4a81013a

Safari next best. Note the "seam" on the equator of Saturn and the moire effect on the horizontal axis of the rings. Also the blur on the shadow on the rings is excessive (but I think I like it better that way).

https://preview.redd.it/9ma55sp8uikd1.png?width=1920&format=png&auto=webp&s=c5ddc64e1dcd5bcc39bc5b2616d484c2446450db

Firefox doesn't understand masking. Where's Saturn? Lack of detail in the rings. Color blending issues as well.

https://preview.redd.it/xo2knsp8uikd1.png?width=1920&format=png&auto=webp&s=ac096ef697f208a22d2a09b365ab9740a4553204

On the other side of Saturn, Chrome wins again. Details nicely rendered.

https://preview.redd.it/ne3gxdy5wikd1.png?width=1920&format=png&auto=webp&s=b504831ea7e9f74c64e8d71748abacc1d54d0aa3

Safari adds a moire-like stain to the horizontal axis of the rings.

https://preview.redd.it/1ezq4ey5wikd1.png?width=1920&format=png&auto=webp&s=a966613d69867c6ececdb3cd8ef2a59cf52da326

Firefox does not mask correctly. Ring details are lost. Opacity on the D ring (the one closest to Saturn) is completely ignored. Text is out of alignment.

https://preview.redd.it/f96rrey5wikd1.png?width=1920&format=png&auto=webp&s=c6795b5e536279845fb4f0089582acc7dbe03334

result

Hi, 

I'm new to CSS and am building out my graphic design website on Cargo. I wanted a menu shape different from their square or pill box options, and made a bevel shape by using clip-path. I'd like to round the edges of my bevel and saw that i could use an svg to round them.

I tried to use https://yqnn.github.io/svg-path-editor/ (dragged in shape screen shot and tried to trace it like i would in illustrator) for it to spit out the code. There's no pen tool though like illustrator has so it feels impossible to trace the shape (but maybe i'm missing something?). 

i don't think i can do it on Figma and get it that way either because I think that just spits out the code for a shape.  

I understood how to make the shape with clip path because it's just coordinates, but all the math involved with creating bezier curves feels impossible to figure out. 

Does anyone know how to do this?

Pictured is my clip path menu (no items on it yet) and here is my code from cargo.

[id="S2811747776"].page {

background-color: rgba(132, 82, 82, 0.44);

}

[id="S2811747776"] .page-content {

border-width: 0.0rem;

border-color: rgba(0,0,0,0);

border-style: none;

}

[id="S2811747776"] .page-layout {

padding-bottom: 40.9rem;

padding-right: 0.0rem;

padding-top: 24.1rem;

align-items: flex-end;

}

[id="S2811747776"]

{

   clip-path: polygon(

53.4% 18.8%, 

59% 18.8%, 

62.4% 25%, 

62.4% 63%, 

59.2% 69%, 

53% 69%, 

50% 63%, 

50% 25%);

}

https://preview.redd.it/9ktrio0fooid1.png?width=928&format=png&auto=webp&s=070e207b7ac076c771d3e55cd5f3c1ec1db942ec

I want to have a vertical bar(use line to do the job), so:

Time=0s: |

Time=1s:    |

Time=2s:    |

Time=3s:     |

Time=4s:      |

Time=5s:          |

Time=6s:         |

Time=7s:    |

Time=8s:    |

Time=9s: bar disappear. I understand I can set x to negative value to do the job

Then after 5s, repeat above process

Thanks

I have an SVG of a Spotify code but I want to replace the white with transparent.

https://preview.redd.it/ypi5ijec0ghd1.jpg?width=640&format=pjpg&auto=webp&s=4af3ad2d1ea9971103b7a0cf13ad248459700668

What is the best way to do this? I have tried changing the colour of the white objects to transparent in various online tools however it just makes the white objects disappear instead of making them transparent.

This path:

<path d="M0 0, 0 15 A5 5 1 0 0 5 20, L100 20"/>

will create a line that looks like the thin green line here:

https://preview.redd.it/2joctrnuo4fd1.png?width=651&format=png&auto=webp&s=c336364bd3f7131148f55709b42677dbf853a214

I don't understand why the curved part is thicker than the rest of the line. The only way I've found to fix it is applying a border-radius to its SVG parent, but this limits some features I will need.

Here are styles applied to this line:

  stroke-width: 2px;
  stroke: rgb(40, 220, 34);
  fill: transparent;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  stroke-linejoin: round;
  animation: dash 5s linear forwards;

Hey guys.

I'm trying to center the word/design "ARCADE" in a transparent dark gray box.
I'm having a heck of a time trying to understand how this works with the viewport and rectangle elements.

Is this possible?

Here's what I've come up with (viewport numbers are just random from me testing).
For now, I've made the box white just to make testing easier.

And if some way I could round the corners, even better!

Thanks for any help!