New answers tagged

2

It does not really matter all that much how deep the notch is, just as long that its wider than a pixel. What you have here Is certainly wide enough for most relevant view sizes. When going to use extremely small sizes you need to massage the individual pixels anyway to achieve a good look. So most likely the depth of the notch is one keyboard nudge sized ...


0

What I usually do when i'm in the situation of dealing with 7-8 Social Media icons is ill put the 3 most important (facebook, twitter, LinkedIn) and then make a dropdown menu after that where ill put the rest. The 3 most important social media of course depends on which business you are doing it for.


21

Cai is correct. I thought I'd add a visual answer as well. The reason this happens is that it's an SVG. Unlike a raster image where you control each rendered pixel, the rasterization of the SVG happens in the browser...so the browser makes these decisions. One of the decisions the browser has to make is when to do anti-aliasing. It will typically do this ...


9

Printing in multiple colours requires accurate registration to avoid unsightly gaps and is a concern when artifacts are composed from multiple sources. Similar concerns can occur even in digital products where limited precision arithmetic necessarily introduces error. The problem being avoid is one of inverse trapping - where deviation from the intended ...


35

Understanding rasterization and the painter's algorithm might help. One way of rendering vector graphics (graphics defined by polygons, instead of pixels) to pixels is to rasterize the polygons while running the painter's algorithm. The painter's algorithm is a bottom-up process where you first put down the background, they draw on top of that background ...


2

Making your own limited exporter should be pretty easy if you know how to loop each shape and vertex. Now I personally can not help you with Sketch or Affinity editor since I have neither. But this is quite trivial to do in illustrator. On the other hand some tools like morphSVG will automatically fix these things for you. Though i do get that sometimes the ...


1

I don't know of any specific tool that will help you, but assuming the SVGs aren't overly complex I would just create the second by manually editing the first. Create your first SVG and save. Duplicate the file. Open and create your second SVG by only editing existing anchor points. As long as you aren't adding any more shapes or anchor points the number ...


170

To prevent possible rendering artefacts. Without the notches you're likely to see the edges of the bottom shapes where they meet the edges of the overlaying shapes (on screen anyway, it's not really a problem when printing). You can see examples and explanation of the possible artefacts here: Image looks embossed when converted to SVG How to put one ...


0

The only two options in illustrator for fonts in the "Save as SVG" dialog are "SVG" and "convert to outlines". The SVG option embeds the fonts, or the system fonts, which you can then swap out in the code with your custom web fonts using a little HTML and/or CSS. If the graphic and the text are not intertwined or overlapping, you could just do the graphic ...


2

There's no way to get Illustrator to export an SVG with a "live" blend mode so any solution with blend modes will need to be done manually after you have exported your SVG. CSS blend-modes Depending on the level of browser support you need, you can use CSS blend modes. There is a great article on using CSS blend modes on CSS-Tricks: CSS-Tricks – Basics ...


2

You can use the following CSS code on that path: .st1 { mix-blend-mode: multiply; } But the browser compatibility is pretty poor. See working example: https://jsfiddle.net/gaa5mbvm/


0

I wanted to cut a cross shape out of another shape. I used the original shape.svg and another image, cross.svg (which was the exact shape I wanted to cut out). Now, I tried all of the suggestions here, but none of them worked and after much experimenting, I found an easy approach which I hope will work for others. open inkscape open shape.svg import cross....


2

How can I create/export SVG's that contain stroke, stroke-width, stroke-dasharray, and stroke-dashoffset fields? With Inkscape this is really easy: Create stroke: Draw or import your object, select the object, then simply pick a color from the palette while holding Shift or set the stroke directly in the "Fill and Stroke" menu (Shift+Ctrl+F). The ...


2

Those lines are a result of the anti aliasing settings inside Illustrator. If you have a computer that supports GPU processing, as opposed to CPU, you can enable the GPU settings by going to View > GPU Preview (⌘+E) and that will get rid of them. You can also refer to this post, which is basically asking the same thing you are and describes two workarounds....


1

depending how complex the "image" is you could run a trace in illustration and then export it to svg from there Instructions: Open AI new doc place image on artboard on the toolbar you will get an option to "trace" there is also a dropdown next to it for more options on what type of trace ungroup seleciton if you need to edit enjoy your vector trace



Top 50 recent answers are included