diff --git a/svgpocketguide.md b/svgpocketguide.md index 654cdf7..9639c59 100755 --- a/svgpocketguide.md +++ b/svgpocketguide.md @@ -133,9 +133,11 @@ These attributes specify [the version of SVG](http://www.w3.org/TR/xml11/) being Let's take a look at these attributes now, in an example of SVG code generated by Illustrator, to ensure this doesn’t take you by surprise when getting started: - - - +```xml + + + +``` In most instances the DOCTYPE and attributes here within the `` element are not necessary and can be eliminated, substantially "cleaning up" your code. @@ -159,9 +161,11 @@ All that being said, you can also copy the code as is, place it into the HTML se Finally, some examples will have portions of a graphic's code commented out to minimize the size of the block of code when that particular portion is not related to the topic at hand. - - - +```xml + + + +``` ## Section 1. Document Organization @@ -207,15 +211,17 @@ Graphics are defined within `` and can then be used throughout the documen For example, the following code draws a very simple gradient within a rectangle: - - - - - - - - - +```xml + + + + + + + + + +``` The contents of the `` has no visual output until called on by referencing its unique `id`, which in this instance is being done through the `fill` attribute of the rectangle. @@ -233,35 +239,39 @@ The stacking order of SVG cannot be manipulated by `z-index` in CSS as other ele The grapes and watermelon below are within the same `` element. The watermelon appears in front of the grapes because the group containing the paths that make up the watermelon is listed after the grapes in the document. - - - - - - - - - - - - +```xml + + + + + + + + + + + + +``` ![Stacked watermelon and grapes, watermelon on top](images/stackedfirst.png) If the group containing the grapes was moved to the end of the document it would then appear in front of the watermelon. - - - - - - - - - - - - +```xml + + + + + + + + + + + + +``` ![Stacked watermelon and grapes, grapes on top](images/stackingtwo.png) @@ -282,9 +292,11 @@ SVG contains the following set of basic shape elements: rectangles, circles, ell The `` element defines a rectangle. - - - +```xml + + + +``` ![Rectangle](images/basicrect.png) @@ -298,9 +310,11 @@ It is also possible to create rounded corners by specifying values within `rx` a The `` element is mapped based on a center point and an outer radius. - - - +```xml + + + +``` ![Line](images/basiccircle.png) @@ -312,9 +326,11 @@ The `r` attribute sets the size of the outer radius. An `` element defines an ellipse that is mapped based on a center point and two radii. - - - +```xml + + + +``` ![Ellipse](images/basicellipse.png) @@ -324,9 +340,11 @@ While the `cx` and `cy` values are establishing the center point based on pixel The `` element defines a straight line with a start and end point. - - - +```xml + + + +``` ![Line](images/basicline.png) @@ -336,9 +354,11 @@ Together the `x1` and `y1` values establish the coordinates for the start of the The `` element defines a set of connected straight line segments, generally resulting in an open shape (start and end points that do not connect). - - - +```xml + + + +``` ![Polyline](images/basicpolyline.png) @@ -350,9 +370,11 @@ An odd number of points here is an error. A `` element defines a closed shape consisting of connected lines. - - - +```xml + + + +``` ![Polygon](images/basicpolygon.png) @@ -374,9 +396,11 @@ This data included within the `d` attribute spell out the *moveto*, *line*, *cur The `` details below define the path specifics for a graphic of a lime: - - - +```xml + + + +``` ![Lime's path](images/pathlime.png) @@ -432,9 +456,11 @@ The S and s commands also draw a Cubic Bézier curve, but in this instance there The following code draws a basic Cubic Bézier curve: - - - +```xml + + + +``` Manipulating the first and last sets of values for this curve will impact its start and end location, while manipulating the two center values will impact the shape and positioning of the curve itself at the beginning and end. @@ -452,9 +478,11 @@ Quadratic Bézier curves (Q, q, T, t) are similar to Cubic Bézier curves except The following code draws a basic Quadratic Bézier curve: - - - +```xml + + + +``` Manipulating the first and last sets of values, `M20,50` and `100,50`, impacts the positioning of the beginning and end points of the curve. The center set of values, `Q40,5`, define the control point for the curve, establishing its shape. @@ -470,9 +498,11 @@ An Elliptical Arc (A, a) defines a segment of an ellipse. These segments are cre Here is a look at the code for a basic Elliptical Arc: - - - +```xml + + + +``` The first and last sets of values within this path, `M65,10` and `50,25` represent initial and final coordinates, while the second set of values define the two radii. The values of `1,0` (large-arc-flag and sweep-flag) determine how the arc is drawn, as there are four different options here. @@ -489,16 +519,18 @@ Once the graphic is complete, the generated XML code, which can be quite lengthy Here is the SVG code for an image of some cherries with added classes for enhanced navigation: - - - - - - - - - - +```xml + + + + + + + + + + +``` ![Cherries](images/embedcherry.png) @@ -514,9 +546,11 @@ Understanding the workspace of SVG is helpful in properly rendering your artwork This pear, happily, has a matching viewport and `viewBox`: - - - +```xml + + + +``` ![Pear](images/viewboxpear1.png) @@ -540,17 +574,21 @@ If we choose not to define a `viewBox` the image will not scale to match the bou If 50px were taken off the `width` and `height` of the pear image `viewBox`, the portion of the pear that is visible is reduced, but then what is left visible will scale to fit to the bounds of the viewport. - - - +```xml + + + +``` ![Pear](images/viewboxpear2reduced.png) The `min` values within the `viewBox` define the origin of the `viewBox` within the parent element. In other words, the point within the `viewBox` at which you want it to begin matching up the viewport. In the above pear image, the `min` values are set to 0,0 (top left). Let's change these to 50, 30: `viewBox="50 30 115 190"`. - - - +```xml + + + +``` ![Pear](images/viewboxpearminval.png) @@ -570,33 +608,41 @@ There are three `` options: meet (default), slice, and none. While Perhaps the most straightforward value here is "none", which establishes that uniform scaling should not be applied. If we then increase the pixel values of the viewport, the below image of cherries will stretch non-uniformly and look distorted. - - - +```xml + + + +``` ![Cherries](images/preserverationone.png) The `preserveAspectRatio` for the image below is set to `xMinYMax meet` which is aligning the bottom left corner of the `viewBox` to the bottom left corner of the viewport (which is now outlined). `meet` is ensuring the image is scaling to fit inside the viewport as much as possible. - - - +```xml + + + +``` ![Cherries](images/preserveaspect2.png) Here are the same cherries when `meet` is changed to `slice`: - - - +```xml + + + +``` ![Cherries](images/preserveslice.png) Note that the alignment values do not have to correlate. - - - +```xml + + + +``` ![Cherries](images/preservenocorrelate.png) @@ -735,11 +781,13 @@ A value of `inherit` will direct the element to take on the `stroke-linecap` spe The stem in the following image has a `stroke-linecap` value of `square`: - - - - - +```xml + + + + + +``` ![Grapes](images/strokesquarestem.png) @@ -751,11 +799,13 @@ The stem in the following image has a `stroke-linecap` value of `square`: Here is a look at the grapes with a `stroke-linejoin` of `"bevel"`: - - - - - +```xml + + + + + +``` ![Grapes](images/strokebevel.png) @@ -791,11 +841,13 @@ The first grapes image here shows the impact that an even number of listed value `stroke-dashoffset` specifies the distance into the dash pattern to start the dash. - - - - - +```xml + + + + + +``` ![Grapes](images/strokedashoffset.png) @@ -826,9 +878,11 @@ The first letter within a `` element is rendered according to the establis While `x` and `y` establish coordinates in an absolute space, `dx` and `dy` establish relative coordinates. This is especially handy when used in conjunction with the `` element, which will be discussed further in an upcoming section. - - Watermelon - +```xml + + Watermelon + +``` ![Watermelon Text](images/watermelontext1.png) @@ -842,9 +896,11 @@ A single value within the `rotate` attribute results in each glyph rotating at t The text below has a rotation set on the entire graphic through the `transform` element, but also a value for each glyph: `rotate="20,0,5,30,10,50,5,10,65,5"`. - - Watermelon - +```xml + + Watermelon + +``` ![Watermelon Text](images/watermelonrotation.png) @@ -854,9 +910,11 @@ The `textLength` attribute specifies the length of the text. The length of the t The following example has a `textLength` value of 900px. Notice that the spacing between the characters has increased to fill this space. - - Watermelon - +```xml + + Watermelon + +``` ![Watermelon Text](images/watermelonspacing.png) @@ -880,12 +938,14 @@ In the example below "are" and "delicious" are located within separate `` While "are" is positioned -30px from "Watermelons", "delicious" is positioned 50px from "are". - - Watermelons - are - delicious - - +```xml + + Watermelons + are + delicious + + +``` ![Watermelon Text](images/watermelontspan.png) @@ -909,9 +969,11 @@ A value of `auto` indicates that the inter-glyph spacing should be based on the The example below has a `kerning` value of `auto`, which in this instance has no visual impact since it is the default value. - - Oranges - +```xml + + Oranges + +``` ![Oranges Text](images/orangekerning.png) @@ -927,9 +989,11 @@ A value of `inherit` is also valid. Th `word-spacing` property specifies the spacing between words. - - Oranges are Orange - +```xml + + Oranges are Orange + +``` ![Oranges Text](images/orangewordspace.png) @@ -961,14 +1025,16 @@ This `` will then call on the chosen path's `id` which is hanging out The basic syntax: - - - - - - Place text here - - +```xml + + + + + + Place text here + + +``` Here is a look at the vector path to be used in the code below: @@ -978,14 +1044,16 @@ After generating this path in vector graphic software the SVG *`` element* ![Simple path with text](images/pathsimpletext.png) - - - - - - There are over 8,000 grape varieties worldwide. - - +```xml + + + + + + There are over 8,000 grape varieties worldwide. + + +``` ##### xlink:href @@ -999,16 +1067,17 @@ The example below has a `startOffset` of "20%" which pushes the text to begin 20 Adding color to the path's stroke via the `` element can aid in understanding what exactly is happening here. - - - - - - - There are over 8,000 grape varieties worldwide. - - - +```xml + + + + + + + There are over 8,000 grape varieties worldwide. + + +``` ![Simple path with text](images/pathsimpletext2.png) @@ -1020,14 +1089,16 @@ There are two types of SVG gradients: linear and radial. Linear gradients are ge A very simple linear gradient is structured like this: - - - - - - - - +```xml + + + + + + + + +``` The `` contains a `` element which allows us to create reusable definitions to be called on later. These definitions have no visual output until they are referenced using their unique ID within the stroke and/or fill attributes for SVG shapes or ``. These shapes and/or text will also reside within the `` element, but outside of the `` element. @@ -1043,15 +1114,17 @@ Linear gradients change color evenly along a straight line and each point (stop Below is the code for a simple linear gradient with two color stops applied to a rectangle: - - - - - - - - - +```xml + + + + + + + + + +``` ![Basic Gradient](images/gradientpic1.png) @@ -1085,7 +1158,9 @@ The `gradientTransform` attribute is optional and allows for further transformat The `xlink:href` attribute allows you to call on the ID of another gradient to inherit its details, but you can also include different values. - +```xml + +``` This gradient inherits the details of the first gradient from the beginning of this section, but has an alternate spreadMethod value. @@ -1103,24 +1178,26 @@ The `fx`, `fy` attributes represent the coordinates for the gradient’s focal p While by default the focal point of the radial gradient would be centered, the focal point attributes can change this. The focal point values for the image below are `fx="95%" fy="70%"`. - - - - - - - - - - - - - - - - - Cherry - +```xml + + + + + + + + + + + + + + + + + Cherry + +``` ![Focal point](images/gradientfocalpoint.png) @@ -1132,15 +1209,16 @@ Patterns are generally considered one of the more complex paint options availabl Here is a look at the syntax for a basic pattern applied to a rectangle: - - - - - - - - +```xml + + + + + + + + +``` ![Basic pattern](images/patternbasic1.png) @@ -1174,24 +1252,19 @@ Patterns can also be nested to create a much more unique and detailed design. Here is a look at the structure of a basic nested pattern: - - - - - - - - - - - +```xml + + + + + + + + + + + +``` The `` element contains both patterns. Within ``, the pattern for the rectangle is calling on the circle pattern via `fill` and the main rectangle is then calling on the rectangle pattern also via `fill`, painting the interior of the main shape with a nested pattern. @@ -1209,13 +1282,15 @@ Below are the shapes without the clipping path applied, set to stretch beyond th Now, here's a look at the code to apply the "Apples" text to this "canvas". - - - Apples - - - - +```xml + + + Apples + + + + +``` ![Text clipping path](images/clippingtext.png)