Orbiters is a free set of animated SVG loading spinners. 21 new spinners were just added to this set, which you can see in the following video.
The great thing about SVG animations is that they are self-contained and have no CSS dependency. You can copy any of these spinners with a single tap in the library and paste them in your HTML or anywhere else SVGs are supported and they will just work.
SVG masks allow making parts of the graphic transparent in a reversible
way, without having to use the subtraction boolean operation. Masks are
defined using the <mask> element. This element can contain
typical SVG shapes or paths. It should also have an id attribute.
The mask can be applied to other elements by referencing its id
in the mask attribute: mask="url(#id)"
By default, the luminosity of the contents of the
<mask> element determine which parts of masked elements
remain visible. In other words:
The new app's vector editor was recently updated to support making and applying masks. This can be done both using the command bar and the Combine tab of the Layers panel as shown in the following video.
IcoMoon's vector editor features a code editor which reflects changes made in the visual editor (and vice versa). Until now, editing the code would reset the entire SVG. This meant that these changes were not suitable for batch editing. This is no longer the case in the latest version of the app. Code editing now records the difference between the edited SVG and its previous state. This difference can then be repeated on other parts of the same SVG using the Repeat Last Action command with hotkey Dot, or repeated on other glyphs using the Batch panel.
Changes made in the new app's SVG editor can be copied to other glyphs via the Edits tab of the Batch panel. This can be especially useful for batch-editing strokes, colors, padding, or adding a common background shape to multiple glyphs. The following video shows this feature, plus the usage of the Color Shifter tool under the Colors tab for adjusting all colors.
Two new formats were added to the new app's Quick Export
section: SVG
<symbol>
and SVG <use>.
This allows you to copy icons to clipboard as these formats. If you already
have an existing set of symbol definitions in your code, you will likely find
these new formats useful. The Quick Export tab is available under the
Export
panel, in both the Glyphs
pane as well as the Library pane.
IcoMoon's vector editor is SVG-first, meaning it doesn't use a different internal vector format. As a result, there is no discrepancy between what you see and what you get. Furthermore, the editor can detect whether a Bézier path is actually a circle/ellipse or a polygon, as shown in the following video. When you edit a path, the editor would automatically convert it to a basic shape if possible, resulting in a cleaner and simpler SVG code.
Of course the reverse is also possible. You can turn a shape to a Bézier path by "Expanding" it. Press the Expand Shape or Stroke button in the Properties tab or search for "expand" in the command bar to apply it on your selection.
A new tool was added to the toolbar of IcoMoon's vector editor in selection mode. It lets you round coordinate values. This can be used for snapping points to the grid as well as reducing the size of SVGs.
You can bring up this tool by pressing Shift + R. A
number field would let you specify the threshold for rounding. For example, If
you enter 0.5, all values would be rounded to the closest
multiple of 0.5. In this example, a coordinate like
1.3479 would become 1.5 and 3.85102
would be rounded to 4, resulting in a cleaner and shorter SVG
code.
This video features several techniques shown previously, for drawing a rocket icon in IcoMoon's vector editor.
You might notice that we are holding Alt/Option before dragging a point on the paths that were duplicated and flipped. Holding Alt before dragging a point allows moving the entire shape while snapping is only enabled for that point. On the other hand, if you hold Alt after you start dragging a shape, a duplicate would be made.
This video highlights path extension using the pen tool for turning a quarter of a circle into a droplet. The resulting path consists of a single segment.
The path is then duplicated and expanded/outlined for offsetting and adding a parallel curve inside the droplet.
In this video, a new blank glyph with a size of 16×16 is added first. It is then resized to 24×24 in the vector editor.
Using the pen tool, a single curve is drawn and then flipped horizontally. The resulting two paths are then joined together to form the heart icon.