/r/svg
/r/svg
3,155 Subscribers
Dwg to SVG conversion issue
I’m trying to convert this .dwg to an .SVG so I can (1) use it for my CNC and (2) put it on T-shirts, hats, etc for my company. I keep getting vector issues in CarveCo. Does anyone have a recommendation, or able to fix this?
22:15 UTC
Using SVG for artist printing to canvas or wall art
I am attempting to start a business selling printed digital art that I've created in Photoshop. I'd like to be able to offer them at various sizes without needing to create PNGs for each size, or continually resize and save/print. Anyone doing that? Most art print sites don't accept SVGs, but my art is pretty lineal so I'd like to find a site or two that will work with SVGs to print to canvas, acrylic, metal, wood. Thanks in advance
20:52 UTC
SVG Anchor point
Hey everyone!
I'm currently working on a internship for which I'm trying to create an PoseNet-powered skeleton animation using SVG files. For this I'm trying to create a skeleton animation to overlay the PoseNet's keypoint/line combinations. Within the SVG I've been trying to set some sort of anchor point or use the transform-origin. However, I'd probably need to access two points. Is there a way to create a skeleton-animation in pure SVG with one SVG with multiple paths? The limbs would require to be moving and rotation, maybe scaling.
07:55 UTC
List of best websites for downloading free SVGs
Hi all,
Given that I have spent lots of time looking for free SVGs, I figured you guys might enjoy the fruits of my labor. All of these sites offer vector images, but in some cases, when you download them, you won't get SVG files -- you'll get other vector formats like .CDR, .AI, .PDF or .EPS. If that happens, all you have to do is mosey on over here to quickly convert them to SVG format.
Without further ado, here are my favorite free SVG sites:
This is probably the best of the bunch -- in my opinion. It has pages & pages of professionally created vectors of various Marvel characters, Looney Tunes, DC, and Hanna Barbera characters. This site is a goldmine, truly.
'Free SVG Dump' Facebook Group
You have to join this group before you can see it all. So first go join this facebook group. Once you've done that, the group itself is nothing special, but if you go to the 'Files' section of the group, you're in for a treat. There are tons of .zip files, containing tons of svgs. Star Wars, Disney, Bluey, Pokemon, Winnie the Pooh, horror movies, NFL teams, etc. It goes on and on. Each zip file often contains hundreds of SVG files in it.
Lots of the stuff in here is the same stuff you'll see for sale on Etsy ... except instead, it's just here ...for free.
Now before you go saying "but I want stuff other than just logos!" ... this site, at first glance, specializes in vector logos. But if you search specific search terms (ex. "bugs bunny", "disney", "mickey mouse"), you'll find tons of good character SVGs. Also, if you're looking for something generic, like a horse SVG, search "horse", and lots of vector logos involving horse businesses will come up. Often, part of the logo includes great vectors of, in this case, horses.
I'll bet you didn't know that you could search specifically for SVG files using google did you. Go to the link above, it will take you to an advanced search page. Enter your search term up top, then scroll down to the field called FILETYPE. Click the dropdown, and select "svg files". Now click the "advanced search" field to search. All the google results you'll get will be for SVG files. This is a great tool.
This is part of Wikipedia ... it's where all the images and video and media gets stored. There are *tons* of vector images in here. Great resource.
Great general purpose site with lots of svg's of various objects and things.
You need to signup to get the most out of this site, but it's free to do so, and totally worth your time. Has tons of general-use SVGs of various things.
Great source for vector icons
Another good source for vector icons
Good site for crafter-centric SVGs
This blog has lots of free SVG packs of cartoon characters
Specializes in simple SVGs, many of popular characters from tv and movies
This one doesn't look pretty, but it's great. It's just a file directory, with various folders in it. But the folders contain various popular cartoon and movie characters...and everything in here is free to download.
This site sells stickers, but all the images of the stickers are SVG files, which they use for the printing of their stickers. You can download the SVG for any sticker you can see on the site. In most cases, you can just right-click on the image, and do "open link in new tab". Once it opens in the new tab, it will be an SVG file you can save. In some cases, it might be a bit more difficult, and you may have to look at the page source, to go find the direct link to the SVG.
Similar to the site above, this is a sticker site, but the sticker images are SVGs ... you can download most of sticker pic you can see, as SVG files
This is a coloring page site. But similar to two links above, all the coloring pages are SVG files. With a bit of work, you can download them all. Lots of super heroes and cartoon characters here.
Other Honorable Mentions:
11:56 UTC
Svg - to handwritten animated (gif)
Hey guys, i drew a textline, converted the png to a svg.
No. my idea is to animate this svg in a handwritten animation.
I tried svgator & figma svg motion, but nothing happens with my svg.
Does anybody has an idea how i get closer to my goal?
Thanks in advance!
13:09 UTC
Turning SVG into CSS is magic
15:37 UTC
How do you get the path from an svg image?
03:10 UTC
wavy transitions between sections
I created a tutorial on how to do wavy transitions between sections using SVGs and clip-path. Let me know what you think. https://youtu.be/nhpAi3hvy2o
17:32 UTC
HTML5 canvas vs DOM rendering
I am trying to build an animated video from several layers of SVGs stacked on top of one another and played in HTML. Then screen capture and stitch the frames into a video.
Here I am facing the dilemma of choosing between using an HTML5 2D canvas (where the SVG can be rendered by simple draw image API) vs a browser window (where the SVGs can be placed in the viewport box with absolute positioning).
The results look different. There are already some articles on this subject:
https://www.sitepoint.com/canvas-vs-svg/
The important. factors in my use case are:
[+] The final output will be screenshots and no need to access or manipulate the elements in DOM. However I'd like to later support animated SVGs but programmatically compute individual frames.
[+] Prefer deterministic output, independent of the browser and OS
[+] The screenshot is required in a specific dimension, say 1080 x 1920 pixels. That will be the dimension of the created video. With canvas it's easy, with DOM I think I'll have to create a designated div of CSS width and heigh in those pixels, and place stuffs with absolute positioning in the div.
[+] Support SVG filters later. e,g, blurs, text effects (e.g. https://www.smashingmagazine.com/2015/05/why-the-svg-filter-is-awesome/)
Another thing I noticed some DOM-rendered SVG examples where the stroke (1 pt wide black) looks non-uniform between the horizontal and vertical sides. Whereas in Canvas it seems the drawing is permanently converted into pixels and any anti-aliasing calculation had already took place.
I'd like to see if anyone has any experience or opinion about these options. If using canvas I am inclined to use the p5.js library which is popular for generative artists and I've used it too, know not for SVG.
22:27 UTC
circle text
SVGs are so powerful. In this video I show how to write text in a circle using path, text and textPath elements. Let me know what you think.
17:43 UTC
Given a CSS based graphic of pipes made up of divs, how do you plot paths?
Please excuse my ignorance, I am new to this. I have a graphic of pipes made up of div borders that I’d like to animate by having a ball navigate the different routes through the pipes. Now that I have the network of pipes all laid out how I like, what tools am I supposed to use to trace the different routes that I want the ball to follow in order to generate the paths for animation? Is it all manual, and I have to figure out the correct x and y coordinates and curvature when going around corners by trial and error, or are there tools for this?
20:33 UTC
Looking for a place to buy an animated SVG background
I want to add a SVG animation background to my site. Looking for a place to buy them online, but can't really find any. Any recommendations?
20:48 UTC
using svg clip path to clip blobs
00:06 UTC
Font
Hello! Does anyone know what font this is? The “cheer” Thank you!
19:59 UTC
SVG to SVG basic ?
Hi, i was working on an android app and i faced a problem and after some searching i discovered that i need to convert my SVG file to be "SVG Basic" which doesn't include transformations and some other things , how can i do that ? and is there a tool to do it for free ? and if so i prefer if it could work locally on my machine with large quantities bc i got a bunch of svg files that needs to be processed the same
Thanks!
12:22 UTC
Can someone help?
I need to find this svg file. Please help me find it I am trying to get the shirt made for my wife who has Ms really bad.
01:58 UTC
I need help with clipPath
I need to create a tear that has a circle clipped at its center. I have tried writing some code, but it won't work and i can't find the problem. The tear completely disappear. I've tried changing the cx, cy and r of the circle but it doesn't seem to work. It is my first time using svg.
Here's my code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<svg id="svg">
<defs>
<clipPath id="clip">
<circle class="ball" cx="4" cy="2" r="2"/>
</clipPath>
</defs>
<path class="tear" clip-path="url(#clip)" d="M76.1904 175C58.6904 200 34.1904 250 76.1904 250C118.19 250 93.6904 200 76.1904 175Z" fill="black" stroke="black" stroke-width="2"/>
</svg>
</body>
</html>
18:32 UTC
Is it worth having an svg photograph with a large file?
15:29 UTC
Detailed svg?
Two different types of images that I want to reproduce (other people have done them), but can't find articles on more detailed svg anywhere, just simple and basic svg (circles, rect, poly):
Geographical map outlines - the detail (ins and outs of inlets and coastline) of the shapes?
15:27 UTC
At what level of detail does SVG not work for an image?
I have an image that contains mostly simple colors, but a few areas contain old grainy black and white photos. My understanding (probably flawed) is that would be too detailed for an SVG to handle properly, but I saved the file as an SVG and it looks the same as the PNG version. I want to get this printed on a shirt, but I don't know if the SVG would actually blow up well or if I'm missing something when I look at it on my screen and don't see any lacking detail in the photo portions. I really feel like I'm missing something, but I don't know how to confirm that without just printing it. Where do you draw the line on what works for an SVG?
20:40 UTC
.svg text misplaced
Hey Guys,
I need help in understanding this issue. I have created a .svg file on Windows OS using Adobe Illustrator, but when I try to open this file on a Linux OS most of the text gets misplaced. I don't understand the cause of the issue. Can anybody help?
17:43 UTC
Anyone know how to create infinite zoom in SVG
Any app recommendation?
13:24 UTC
Apply CSS to and svg while zooming
Good morning,
I have and svg and some strokes have the following css rule applied.
stroke-width: 0.1%
The rule will be rendered correctly - but not while zooming or after the zoom ends.
It will be applied afterwards only when I drag the svg.
Let me describe it somehow:
You have the svg and zoom in, the strokes will be bigger and bigger. You stop zooming - nothing happends.
Pan the canvas a tick and the strokes' width is correct.
Do someone of the hivemind have an idea how to "apply" the css while zooming?
I changed it from setting the stroke-width programatically which worked good - but with "unnecessary" code in the case that it could be done by css.
14:34 UTC
Is there a way to simplify shape of an svg image?
I have a pretty detailed svg logo image, and I need it to be simplified for embroidery - Is there some easy ways to do so? Inkscape's Ctrl+L gives really bad results.
10:54 UTC
How to curve a <tspan>
Hi everyone, how can I rotate my <tspan> like the the expected image
<g id='outermost__layer'><text className='cls-6' transform='translate(49.59 265.18)'><tspan id='Database Security' x='-20' y='20' className='label__chart'>Database Security</tspan></text><text className='cls-6' transform='translate(95.83 193.71)'><tspan id='Workload Security' x='0' y='-20'>Workload Security</tspan></text><text className='cls-6' transform='translate(247.3 66.63)'><tspan id='Endpoint Security' x='0' y='0'>Endpoint Security</tspan></text>
// other parts
...
</g>
09:18 UTC
How to extend a path?
Say I have a path like the orange one in the picture. Is there a way to programmatically extend that path to both sides (green)?
I looked in to Paper.js and other libraries but can't find a function that seems to do it.
Thank you!
20:36 UTC