What are /r/svg's favorite Products & Services?

From 3.5 billion Reddit comments

• First, I stripped all your quotes, and replaced them with ".
• Next, I stripped all your class statements. They weren't doing anything, and since they were poorly defined, they broke everything most of the time.
• <line> and <rect> don't have closing tags. You close in-tag. <rect x="50" y="30" width="455" height="50"/>

There. Now the code renders, at least, even though it doesn't work.

• I re-arranged your tags so they're consistent across the board.
• I stripped extra whitespace that was actually making it confusing to look at.
• I added back minimal whitespace to line things up in the editor, and found you had actually missed a ton of quotes. Putting those in.
• You're using dy shifting on text. Depreciated as of SVG2, best to break your habit of that now. Don't use it. :)
• None of your <line>s drew because they're missing bits and pieces.
• You have no XML declarations. At all. Putting those in.
• There's a wonderful bug in Webkit based browsers such as Chrome and Safari: <line> statements that are perfectly horizontal or vertical don't render. It's been there for years, and doesn't show signs of being fixed any time soon. <path>s are easy anyway.
• There's no code reuse anywhere in this SVG, yet it screams for it.

Alright, I can see what you were going for now. Let's do this right! :)

Here's my take: https://codepen.io/SilentDis/pen/wYOrRY/

I took a bit of time with a calculator to get this right, about 20 minutes, but I was bored :)

Some Notes:

• It's a graph. People freak out when there's no color on a graph. Colors added.
• Transparency is easy and pretteh.
• COMMENT YOUR #$%^ING CODE!

EDIT: I redid it using viewBox and <pattern> because I was upset with how much garbage code there was in it.

Gimp tends to be used to create bitmaps a bit like photoshop. InkScape might be a better tool for this job. InkScape is an open source vector graphics software package a little like illustrator it should be more suited to your use case.

https://inkscape.org/en/

If you watch to be able to stretch the image horizontally, you'll need to set the SVG's "preserveAspectRatio" attribute to "none". (By default, SVGs "fit" the viewbox into the render region, but this change will make an SVG behave more like a traditional image tag.)

After that you can set the SVG width to 100% in CSS.

Example: https://stackblitz.com/edit/angular-a8sle3

Note that this will literally stretch the image, warping line thicknesses and corner radii. If you want the boxes to stretch like a responsive website, you'll probably want to use HTML+CSS instead of SVG to solve this problem.

Adobe Illustrator is widely used and somewhat a standard, yes. But also historically targeted for print and bloated if all you are doing is SVG for web. I'd try out Figma, a collaborative prototyping tool with great drawing tools. It's free for your needs and very easy to get into compared to a lot of the alternatives.

If you want a simple method (for mobile phones and tablets only) then Simplector or the Pro version is probably worth your time. InkScape is a much better programme if you know how to handle it but is still lacking. Both of them produce slightly bloated SVG images, but the Simplector ones can more easily be hand optimised. A somewhat complicated image can be compressed heavily [as seen here](/r/CrossView/comments/3cf10g/z/csuvl2x).

​

Remember that they often take longer to render than more conventional methods and take more to create. Support is varied and only guaranteed on (mainly) newer browsers. The uptakes are that they're infinitely scalable (never lose resolution/clarity) and tiny file sizes.

That original SVG is absurdly inefficient (thanks, Illustrator!), so I built a new one from scratch. When minimized it's just 17% of the original 6,470 bytes. Plus it's also self-contained (with the CSS for the animation inside the SVG itself).

https://codepen.io/Pcooney13/pen/jxEJMm

just popped your svg into codepen and put a keyframe transition on it. change the width/height to get the size you need

the last bit off css feel free to take off but it stops the spinning on hover

I won't be redefining pixels as vectors - that would look like lots of vector squares with 90 degree angles in a grid pattern etc . Trace tries to detect edges based on brightness or color etc.

The number of nodes used to define an edge is based on the accuracy settings.

After tracing one way to reduce nodes is to use simplify - but you will of course lose detail.

https://inkscape.org/doc/tutorials/advanced/tutorial-advanced.html

What's the deployment environment?

GNUplot is fantastic at 'plotting data' and can 'print', or output, a variety of formats including eps, png, and especially for you.. svg