-
Notifications
You must be signed in to change notification settings - Fork 17
Creating Charges
This page explains how Drawshield uses SVG files as charges, and how the SVG files must be formatted and constructed. Although the files are standard SVG, and can be viewed and created in programs such as Inkscape. Drawshield requires some specific ways of representing images, and supports only a subset of SVG features. Please ensure that you follow these requirements very carefully or things may not display how you expect!
This is quite a complex area but I have tried to present the information so that simple charges can be drawn after just reading the first few sections and the more advanced topics further down the page can be left until you need them.
Download the file svg/charges/geometric/annulet.svg, modify it using only paths (I recommend Inkscape), colour it pure yellow, give it a new a new name and upload it to the GitHub repository folder svg/charges/submissions/<new-name>.svg
Create a properly valid SVG file with height and width given in Pixels (as integers, i.e. no decimal points). Height and width can be anything as it will be scaled as necessary, I normally use around 500 x 500 pixels, but it does not have to be square.
Within the SVG draw your charge using only basic <path> elements. Duplicate elements if needed, do not use the <use> element.
Do not use gradients or any fills other than flat colours (although you may use any opacity value). Do not use dashed strokes.
You may use black, white or grey areas for highlighting, shadows etc.
The area(s) that should take the given tincture for the charge should be given a "fill" attribute with the value of any of the following hex colours:
#ffff00 (Pure yellow) #ff0000 (Pure red) #00ff00 (Pure green) #0000ff (Pure blue)
If you want to be given credit on the "create" page, use the RDF framework "creator" element (e.g. the "Creator" field in the "Metadata" tab of the "Document Properties" window in Inkscape).
Post your file to the Github repository "svg/charges/submissions/<charge-name>.svg" and I will test it, add any new words required to the lexicon and move the file somewhere more appropriate!
Complete details, in order of increasing flexibility and complexity follow.
Within the DrawShield source code, charges are found in the folder svg/charges/<group>, where <group> is an arbitrary "category" that can be any string. The groups exist for several reasons:
- To help organise and find charges when I need to edit them(!)
- To allow for the same name in different groups (No current examples, but there if needed)
- To allow certain advanced features to applied to an entire group (for example, proper colours, flexibility and so on)
In general, you need not worry too much about the group as long it has a sensible name and is correctly matched up to the keyword discussed in the next section.
The DrawShield parser takes a blazon and splits it up into the component parts to be drawn. Each component part is given a "keyword". In the case of charges the keyword consists of two parts, the group name (from above) and the name of the charge. The file parser/english/charge.inc lists all the charges currently recognised by drawshield. Let use consider the entry for the annulet:
array ( 'annulets?', 'geometric/annulet' ),
What this tells the program is that whenever it is looking for a charge and finds the word "annulet" or "annulets" then it should draw the contents of the SVG file found at the location svg/charges/geometric/annulet.svg. When submitting your new charge it would be helpful to include with it (as an e-mail, an XML comment within the file, or somewhere in the metadata) the following information:
- A suggested group name for your charge (see the folder
svg/charges/for the existing groups) - The word(s) to be searched for in the blazon - be sure to include:
- Plural forms
- Alternative spellings
- Alternative names (also with plural forms and alternative spellings)
This will ensure that the parser will correctly recognise and draw your charge in all its forms.
(For charges that can be drawn in different ways see also the section below on "Charge Postures")
The file should be valid SVG (XML). The top level element, <svg> must include attributes for "width" and "height", which must be specified as integer pixel values. The "viewbox" attribute should not be used, or if it is present, should just match the given width and height. Your charge should occupy the limits of the width and height (i.e. each edge should touch the charge somewhere).
In Inkscape the necessary header can be ensured by going to the "Document Properties" window and using the following settings:
- Display Units: px
- Custom size -> Units: px
- Scale -> Scale x: 1.00000
And then with nothing selected in the drawing window open the dropdown "Resize page to content" and click the button "Resize page to drawing or selection".
Finally, when submitting the finished file it is preferred to use "File -> Save As" and chose the format "Plain (SVG)" from the dropdown at bottom right. (This is not vital, but makes your file much smaller).
It is safest if the drawing contains only <path> elements. You can draw using any of the tools provided but ensure that the result is converted to a path afterwards. In Inkscape this can be done by selecting objects and using the menu item "Path -> Object to Path".
Paths may be transformed as required, but if you want to use multiple copies of the same path please ensure that you make full copies and not <use> elements. In Inkscape this means always using the menu item "Edit -> Duplicate" NOT "Edit -> Clone -> Create Clone". (If you find that you have used clones, or find it easier to work with them then you can convert to full duplicates at the end of your drawing, just select all items and use the menu item "Edit -> Clone -> Unlink Clone").
You may use group elements as much as you like, nested and transformed to any depth.
Most other things will NOT work as you expect, in particular gradient fills will be ignored, as will embedded bitmaps, masks and clipping paths. For maximum chance of success, remember KISS, "Keep It Simple Stupid"!
Those parts of the drawing that should take the given tincture (e.g. be coloured blue in "an annulet azure") should be given a fill attribute with a pure colour; any of the following:
#ffff00 (Pure yellow) #ff0000 (Pure red) #00ff00 (Pure green) #0000ff (Pure blue)
In Inkscape these can all be found in the default colour bar at the bottom of the screen just to the right of the grays - with the object selected a left click on the appropriate colour will create the necessary fill attribute.
When using the charge in the final shield, DrawShield will replace all of the fill attributes above with the appropriate tincture colour.
You should use strokes to outline your charge - not every path needs to have a visible stroke but I believe that charges stand out more clearly from the field of the shield if they are given a visible stroke, so please set your path stroke widths to an appropriate size and make them either black or grey, at least on those paths that show the outline of your charge.
When using the charge in the final shield, DrawShield will replace all of the visible stroke colour attributes with a light grey. (This also ensures that you charges are visible if the user wants to print an uncoloured version for colouring in).
You can fill paths with pure black, pure white or any shade of gray if you want to highlight or darken a particular area. For example, creatures may their eyes drawn as a pure white background with a pure black pupil, these will be maintained "as is" in the final drawn image.
If you want to provide simple shading (but not gradients) then you can create a path and fill it with any shade of gray with an opacity of less than 1. (I recommend that paths used for shading do not have visible strokes). Ensure that these shading paths are on top of the base colour and they will be left "as is" in the final drawn image, with the selected tincture visible through the shading as a slightly darker colour. For an example of this look at the charge svg/charges/geometric/billet.svg.
When drawing a shield on the "create" page of drawshield.net, the program includes information below the drawn image giving credit to the artist of any charges that were used in the image. It takes this information from the "metadata" in the SVG file, in particular the <creator> descendant of the <RDF> (Resource Description Framework) element. This sounds scary but there are two simple ways to ensure that this information appears in your file:
- In Inkscape, open the "Document Properties" window, click on the "Metadata" tab and type whatever you want into the field marked "Creator:" OR
- Copy the code below, replace the string (Drawshield internal) with whatever you want and place it as the first child of the top level <svg> element in your file.
<metadata>
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
<cc:license rdf:resource=""/>
<dc:title/>
<dc:creator>
<cc:Agent>
<dc:title>(Drawshield internal)</dc:title>
</cc:Agent>
</dc:creator>
</cc:Work>
</rdf:RDF>
</metadata>
Some charges, especially animals, can be drawn in a number of different stances, or "postures". DrawShield manages this situation by expanding the SVG naming convention. To take a very simple, there two variants of the charge "book", each in its own SVG file, with the file names:
Internally, DrawShield refers to words like "open" and "closed" as modifiers. A single charge can have several modifiers, for example a lion rampant reguardant tail nowed. When the program encounters this situation it looks at all of the files in the folder svg/charges/lion/lion-*.svg and applies a complicated algorithm to find the "best" match. (Best in this case including criteria like matching as many modifiers as possible, minimising any "unwanted" modifiers and weighting modifiers given first more highly).
Note that common modifiers like inverted, reversed, in bend and so on are managed through transforms which the program applies itself to the charges - you only need to provide modified charges if the actual appearance changes, not just its orientation.
Again, in most cases you don't need to worry about this unless your charge comes in different forms; in which case just provide multiple SVG files with the modifiers as part of the file names.
Some charges are made of component parts that can be given a different tincture from the main body, for example a sword is made up of a hilt (handle), pomell and blade and we can say things like an arming sword argent hilt and pomell or. Internally, DrawShield refers to these component parts as "features". To cater for situations like this DrawShield searches through the SVG code looking for a <g> element with an "id" attribute matching the feature name, e.g.:
<g id="hilt">
<path fill="#ff0000" d=".... /> <!-- etc... -->
</g>
The same rules for tincture colouring apply as with simple charges, any path inside the feature <g> element that has a fill that is pure red, pure yellow, pure blue or pure green will be replaced by the tincture given for that feature in the blazon. I generally use the convention that the main "body" of a charge is coloured pure yellow, and I use the other pure colours to indicate parts that are features.
Note that if you do not specify a feature tincture (e.g. just use an arming sword argent) then all features are given the same tincture as the body. If you want to, you can also group the main body with a <g> element with the "id" value of "body" but this is not required, it is just for ease of identification when editing.
Finally, you may find that it is not convenient to gather all the parts of the same feature into a single group (some parts of the feature might be behind the main body, with other parts drawn in front for example). Since "id" attributes must be unique you can append a digit to the feature name and hence have <g> elements with id values of "hilt1" and "hilt2" for example.
To create and name the required groups in Inkscape you can select the objects that make up the feature and use the menu item "Object -> Group" to place them all in the same group. You can then use the "Object Properties" window to set the "ID:" field to the required name. (Don't forget to press the "set" button after entering the name).
Note that the program only looks for groups with feature ids. If you have a feature that is implemented by a single <path> you will still need to group this single element and give the group the appropriate feature name.
The arming sword svg/charges/sword/arming-sword.svg is a good example of a charge with different features.
Some animals are sometimes seen wearing crowns, for example the various lions. DrawShield currently has more 20 variants of the lion and a similar number of crown types. Rather than draw individually the 400+ possible combinations, the program includes a sneaky feature to make this simpler.
If your charge might possibly wear a crown you can create an invisible rectangle in the position that a crown should be, and give it an "id" attribute with the value "crowned". The rectangle can be transformed (rotated, scaled etc.) as required. For example, this is the crown position used for the basic lion:
<rect
width="83.408447"
height="37.267605"
x="177.62961"
y="2.7901289"
transform="matrix(0.99958079,-0.02895243,0.02895243,0.99958079,0,0)"
id="crowned"
style="fill:none;stroke:none" />
The "height" and "width" attributes obviously show how big the crown should be, "x" and "y" are the location of the top left point of the rectangle, and in this case, the transform ensures that the crown is at a jaunty angle. Note the "style" attribute, which ensures that the rectangle is not visible.
If the blazon includes a crown for that charge (e.g. a lion gules ducally crowned or) DrawShield will place a ducal crown such that it occupies the space occupied by the invisible rectangle and will apply the same transform.
Some charges can hold other charges, you can add metadata in the form of SVG elements to tag such interactions.
A charge that can hold things need to be tagged using ellipses or circles, that mark where and how large the held item should be. This should be marked (for a hand) in the area between the index and the thumb. It can be rotated or have other transforms that will be applied to the held charge.
The id must be one of the holding values, which include:
in-hand-rightin-hand-leftin-foot-rightin-foot-leftin-mouth-
in-flag-point(this is only for objects that can be used as flagpoles)
The radius of the circle (rx for ellipses) determines the size of the held objects (matched based on the held charge tag described below).
Generally, the circle needs to match how wide the grip of an arming sword should be when held by the charge.
The held charge will replace the tag in the SVG, so layering is preserved, this means you can have the held object appear between layers of the holder charge, not strictly behind or in front of it. However if you place a tag withing a SVG group, you must ensure the group itself doesn't have transformations applied as this might throw the renderer off.
These tags must be made invisible in the SVG because the code handles them in a special way only if there's a charge present in their location.
Charges can be held even without special tags, it will be held from the middle and have a grip radius of 1/12th of the width.
If a charge has a handle or a specific part it should be grabbed by, it needs to be tagged, again with a circle or ellipse (with id=hold-point).
The held charge will be transformed so the center and radius of its tag matches the tag in the holder.
Note that some charges have a viewBox that might throw positioning off, if that's the case you should clear it and translate the SVG elements back into place.
The code will remove this tag from the charge SVG so you don't need to hide it.
I realise that this all seems very complicated, but take each step only when you need to! Simple charges can be drawn in a simple fashion - things only get complicated with charges that have multiple postures and features and I have tried to explain all this above.
As always, I am very pleased to help with anyone wanting to add charges, just get in touch!