As PSSVG has an action, it should use this to build it's examples

This should inherit from SVG.Polygon.

Filtering effects are cool, and need more examples.

This is a nifty capability to be able to morph a polygon from one shape into another.

This prevents any limitations of the generator from stopping implementation of newer features.

It is currently in a series of jobs, which is more likely to cause conflicts.

This may need improvement later, if interval formats are used anywhere.

However, for the common case (-dur/-duration), being able to simply use a [Timespan]'s .TotalSeconds would do.

Not all examples have a standardized fill, which makes them more difficult to see depending on the color scheme.

This would help demonstrate sequential animation (and look cool)

Now that PipeScript allows us to inherit functions, we can start creating custom commands that output SVG elements and otherwise act like an SVG element.

These commands should exist beneath /Commands/Custom.

Initial suggestions include:

• #43 (inherits from SVG.filter)
• #42 (inherits from SVG.Path)

PSSVG should use HelpOut to create automatic documentation.

PSSVG is a PowerShell Module for scalable vector graphics. It allows you to build SVG elements using simple PowerShell functions, and it has a function for every element in the SVG standard.

PSSVG

Some files still contain references to the development name of this module.

Splatting and simple math can make for musically synchonized animations.

Include an example that generates a pattern that repeats based off of a beat.

It currently attempts to run a non-existent command.

Make a line in the center and a circle, and rotate the line around that center point.

ConvertTo-PSSVG

PSSVG would be much more useful if it could easily convert any SVG off of the internet into a PSSVG file.

So, as of PSSVG 0.2.4, you can ConvertTo-PSSVG

What it does

ConvertTo-PSSVG takes an SVG from a file, url, string, or xml document and converts it into a PSSVG script.

For example, if I download the feather icon for anchor and then run

ConvertTo-PSSVG Anchor.svg

It will output:

=<SVG> -width '24' -height '24' -viewBox '0 0 24 24' -fill 'none' -stroke 'currentColor' -strokewidth '2' -strokelinecap 'round' -strokelinejoin 'round' -class 'feather feather-anchor' -Content @(
    =<SVG.circle> -cx '12' -cy '5' -r '3'
    =<SVG.line> -x1 '12' -y1 '22' -x2 '12' -y2 '8'
    =<SVG.path> -d 'M5 12H2a10 10 0 0 0 20 0h-3'
)

How it works

This is actually fairly trivial.

First we get the XML form of the input, then we:

1. Go thru to the first node
2. Replace text nodes with their text.
3. Find the appropriate command
4. Replace attributes with parameters (if found)
5. Replace child nodes recursively (effectively goto step 1).

For bonus points, we indent.

What we can do with this

Being able to ConvertTo-PSSVG gives you an easy way to integrate any existing design into your scripts. This can help, say, establish a visual leitmotif.

Hope this Helps

As ConvertTo-PSSVG doesn't control the whole internet, it's important we handle the unexpected.

Thus:

When ConvertTo-PSSVG attempts to reach a RESTful URL and it receives a string, it should:

1. Trim any leading content before the first tag
2. Attempt to coerce it to XML.

It should be mapped to PSSVG.start-automating.com

Since the /Examples directory contains a number of examples, any given function could include the contents files that reference that command as examples.

Because PSSVG is built atop of MDN's documentation, it contains various markdown links that would become invalid.

They can be corrected by linking to developer.mozilla.org.

In some cases, there are several fixed arguments and one or more types of input (for instance, with -FontWeight).

Making the best PowerShell experience for these parameters requires making an ArgumentCompleter.

Even when the standard indicates that the content will be text, there are scenarios where the content should be text and elements.

Thus -Content should be escaped if it does not start with a tag, and all -Content parameters should be untyped.

In order to improve the module experience and make PSSVG more useful, one should be able to use the elements created at each step as objects.

These objects should be decorated to allow for formatting.

Some SVG attributes have multiple property tables, with different valid values for different elements.

This presents a bit of a blocking problem, since this presents all but the first alphabetical element from having the correct set of attributes.

To work around this, we will need to parse multiple tables and associate them with the elements they apply to.

SVG.DropShadow should inherit from SVG.Filter.

This will assist site generation.

Write-SVG should be the core function other SVG functions call (to save disk space)

Now that examples are automatically included (#16), it's important to expand coverage of the examples so that more commands have them.

Because Start-Automating is a PowerShell shop, we have to make a lot of logos that visually hint at the relation between this project on PowerShell.

Doing this consistently across projects is a big benefit of building your assets with scripts. Essentially, what we can do is create a reusable part of a design and reuse that part in project after project.

I call this sort of technique a "Visual Leitmotif" (a Leitmotif is a recurrent theme throughout a composition).

The SVG standard provides something that can make this a little easier, a Symbol.

Using PSSVG, we can create our Visual Leitmotif with just a few lines of code.

=<svg> -ViewBox 100,100 -Content @(
    =<svg.symbol> -Id psChevron -Content @(
        =<svg.polygon> -Points (@(
            "40,20"
            "45,20"
            "60,50"
            "35,80"
            "32.5,80"
            "55,50"
        ) -join ' ')
    ) -ViewBox 100, 100

    =<svg.use> -Href '#psChevron' -Fill '#4488ff'
)

The above code produces this little nifty graphic:

That's a nifty little image we can use again and again.

Here's the ScriptDeck logo, which makes pretty prominent use of the PowerShell Chevron:

Here it is again in the GitPub logo:

And again in the ugit logo:

And again in PSDevOps PSDevOps logo:

And, of course, in an updated PSSVG logo:

As a design technique, visual leitmotifs are a great way to remind people of a central brand without drawing too much attention to it.

With scripting, it's easy to establish that visual leitmotif and reuse it moving forward.

Just get it right once and include or copy and paste between project to project.

Hope this Helps

SVG.Elements should have a formatter.

A very ideal version of this would show colorized XML for the SVG content.

Luckily, EZOut already has one. We should be able to make some minor modifications to this to produce an ideal experience.

This should be done with PipeScript and a README.ps1.md

Each SVG command should support a -Data parameter, which will be used to populate data attributes

SVG.Spiral should inherit from SVG.Path and create a spiral.

It should exclude the parameters: D, Fill

Fill should always be transparent.

This will make the repository easier to navigate.