Icon-font and SVG

Icon font used for sharing with SVG apps

Icon Font Fonts overview

CSS3 added the @font-face attribute, the traditional browser is to set the font by font-family, if not in the system, use other fonts instead.
With the @font-face attribute is much more convenient, can be done by the developer design custom fonts, the loading process is the browser by downloading fonts, and then rendering the page

Font-face can set custom auto, or set custom picture font, the font icon is born. @font-face introduce a generated font file, and then the Web
page where you need to use an icon, write the corresponding "text", then you can see the icon in the browser.
Icon Font is the first online web font Generation tool website, there are many icon fonts can be applied

Iconfont is very simple to use, open its homepage, you will find a lot of icons, click on the icon you need, you will find the icon to the top right corner of the shopping cart, choose good
icon, click on the cart to download a zip package.

After decompression, will appear: demo.html, Iconfont.eot, Iconfont.svg, Iconfont.ttf, Iconfont.woff these several files.

Where the demo.html file is used for instructions and effects, the other four is to convert the generated font files for compatibility with each platform. All you need to do is open the demo.html file
You will see detailed instructions for use.
There are many benefits to using font icons, broadly as follows:

Good compatibility, every platform browser can be used basically, and in some low-level browser, the effect is better than the picture
Smaller size, less HTTP requests, and more front-end performance than images with the same effect
Good maintainability and maintenance can be quickly applied by adding or subtracting fonts.
Good interactivity, change the font color can change the color of the icon, but also with the CSS3 animation, gradient, transition, deformation and other properties to achieve
Complex interactions

There are also some drawbacks, and the examples are usually only one color, although gradients can make their colors richer, but the compatibility is gone. There are some other drawbacks, but for
Iconfont This tool, the biggest drawback is that there are too few icons. Foreign website Iconfont fonts have Fontello can be used.

PC-Side Application Tutorials

Font-face declaring fonts

 
  @font-face　{
 
 font-family:  ' Iconfont '; 
 
 Src:url ( ' Iconfont.eot ');/* ie9*/
 
 Src:url ( Iconfont.eot #iefix ') format ( ' Embedded-opentype '),/* IE6-IE8 */
 
 URL ( ' Iconfont.woff ') format ( ' Woff '),/* Chrome, Firefox */
 
 URL ( ' Iconfont.ttf ') format (4.2+*/
 
 URL ( ' Iconfont.svg#iconfont ') Format ( ' svg ');/* IOS 4.1-*/
 
} 
   

Define the Iconfont style used

　.iconfont{
　  font-family:"iconfont";
　　font-size:16px;font-style:normal;
　　-webkit-font-smoothing: antialiased; 抗锯齿显示样式，safair或chrome
　　-moz-osx-font-smoothing: grayscale;
　　display: block; 如果出现小方块，在ie7下，则加这句话
　　-webkit-text-stroke-width: 0.2px;  pc的chrome出现严重的锯齿
　　}

Page references

  class="iconfont">&#33</i>

Application considerations:

Only use him when you're sure you need @font-face.
Define your @font-face in front of all script tags
If you have many font files, consider dispersing them under several domain names.
Do not include unused @font-face declaration--ie will not be used or not, all load
gzip font files while giving them a future expiration header statement
Consider the post-load of font files, at least for IE.

Reference URL
Reference URL

Icon Font Maker

Make a good AI diagram, save as SVG, and then upload through the URL, click to add to the shopping cart, and then download in the shopping cart, will generate a call to the demo, the Image field calls.

The above is the use of Icon font fonts, the following describes the application of SVG.

Application of SVG

SVG Scalable Vector Graphics (Scalable vector graphic) is a graphic format for describing two-dimensional vector graphics based on Extensible Markup Language (XML).

Characteristics

1. Arbitrarily retracted.
The user can scale the image display without destroying the image's sharpness, details, etc.
2. Text is independent.
The text in the SVG image is independent of the image, and the text retains an editable and searchable state. There is no longer a font limit, and the user system will see exactly the same picture as when they were created, even if a font was not installed.
3. smaller files.
In general, SVG files are much smaller than those in GIF and JPEG formats, and are therefore fast to download.
4. Ultra-strong display effect
The SVG image always has a clear edge on the screen, and its sharpness is suitable for any screen resolution and print resolution.
5. Super Color control.
SVG images provide a 16 million-color palette that supports ICC color profile standards, RGB, line x fills, gradients, and masks.

Working with inline SVG

SVG used as background image
SVG is used as the SRC attribute
Inline SVG

Declaring an SVG element

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300">
 <!--  svg stuff here  -->
</svg>

Create an SVG graphic circle: The base shape, a circle created from a center point and a radius.

For the circle element, we have 3 properties that need to be specified. They are cx,cy,r. CX and Cy are the coordinates of the center of the circle on the X and Y axes, and if not specified, their default value is 0. R is the radius of the circle. In general, for a circular element we can see the following tags:

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="50"></circle>
</svg>

Rect: The base graphic, based on the position of the corner and the width and height of the rectangle to create the rectangle.

The creation of rectangles is similar to the way the circles are created. In its most basic form, we need to specify the coordinates x and y of the upper-left corner, as well as the width and height of the rectangle. Its label is as follows:

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" viewBox="0 0 200 100">
  <rect x="0" y="0" width="200" height="100"></rect>
</svg>

Polygon: A base graphic that creates a polygon based on a line segment connected to a coordinate point and two points.

We can define our polygon elements by multiple sets of X-y coordinate points on the points property. These coordinate points are connected by line segments. The label is declared as follows:

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 100">
  <polygon points="0,50 50,0 150,0 200,50 150,100 50,100"></polygon>
</svg>

Path: A versatile graphic that can be used to create arbitrary shapes. All the underlying graphics can be created by it.

The path element is the most powerful element in shape processing. In the path element, we can define the D attribute, which defines how our paths are extended. The D property allows us to specify a motion trajectory through a series of commands. We can construct some complex shapes with line commands and bending commands. But in fact, you don't want to write the Bezier curve, and the second is to create and output SVG through vector software. But it's not a bad thing to know about them.

M x y: Move to coordinates x-y
L x y: Draw a line from the current position to the coordinate X-y
H x: Draw a horizontal line from the current position to the coordinate X
V y: Draws a vertical line from the current position to the coordinate Y
Z: Closed Path

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
  <path d="M 0 0 H 200 V 200 H 0 Z"></path>
</svg>

Fill: Fills the element's color
Fill-opacity: Fill color transparency for elements
Stroke: The color of the stroke of an element
Stroke-width: The stroke width of an element
Stroke-opacity: The color transparency of the stroke of an element

<svg xmlns="Http://www.w3.org/2000/svg" width="Height=" "Viewbox= <circle class=" circle "cx=" 100 "cy=" "r=" "fill=" #3399 cc "stroke=" #333333 "stroke-width=" 5 "></CIRCLE> 
 </SVG> 
 
. circle {
 transition:stroke 0.3s, Fill 0.3s; 
} 
 
. circle:hover {
 Stroke:  #3399cc; 
 Fill: # 333333; 
} 
                 /span>    

structured, grouped, and referenced elements in SVG

Grouping using elements

element to group all of its child content. It usually has an id attribute that is used to name the group. The style you apply to the element will also be applied to all of its child elements. So it's easy to add animations for styles, animations, interactions, and even an entire group of objects.

Using REUSABLE elements

Elements allow you to reuse existing elements and give you a copy-and-paste function similar to the one in the graphical editor. It can be used to reuse a single element or to reuse a set of defined elements.

The X,y,height,width element has a property that references other content by using the Xlink:href property. So if you've defined a grouping and given it an ID, when you want to use it somewhere else, you just need to give a URI to the Xlink:href attribute, and then specify the position of x and Y, which is the origin of the set of images (0, 0).

x="100" y="100" xlink:href="#bird" />
<use x="100" y="100" xlink:href="path/to/animals.svg#bird" />
<use xlink:href="#bird" transform="translate(100, 100)" />

Using reusable stored elements

Elements can be used to store content that we do not want to display directly. In other words, an element is used to define a component, but not to render directly. This hidden storage element can be later applied and displayed by other SVG elements, making it ideal for drawing patterns that contain reusable images.

<Svg>
<Defs>
    <LinearGradientId="Gradient" >
 <Stopoffset="0%"style="Stop-color:deeppink" ></STOP> 
 < stop offset= "100%" style=" Stop-color: #009966 "></STOP> 
 </LINEARGRADIENT> 
 </DEFS> 
 
 < Rect stroke= "#eee"  Stroke-width= "5" fill= "url (# Gradient) "></RECT> 
 
     

To group elements by using

Ideal for defining reusable components (or symbols). It can also be instantiated as an element of a template. And with the Viewbox and Preserveaspectratio properties, it can be scaled in a rectangular window defined by a reference element. Note that the symbol element can redefine a new window each time it is instantiated by the use element.

SVG SMIL Animation

Now this feature is being gradually removed, it is best not to use, it is in SVG directly add animation elements, and now do all use CSS3 to write the operation of the elements.
The main content is

<set>
<animate>
<animateColor>
<animateTransform>
<animateMotion>`

An example of correct wording
 #mouthTwo {
Animation:domouth1s linear infinite;
-webkit-animation:domouth1s linear infinite;
}
@-webkit-keyframes Domouth {
from {
Opacity0;
}

 50% {
Opacity: 1;
}
}
@keyframes Domouth {
from {
Opacity: 0;
}

50% {
Opacity: 1;
}
}

The previous wording
<animate attributename="opacity" from="1" to="0" begin="0s" dur=" 3s " repeatcount="indefinite "/>

Reference documents
Snap.svg.js Making SVG animations
SVG tutorial Video

The above is for reference only

Icon-font and SVG