https://solaceinfotech.com/blog/svg-things-you-can-do-with/
What is SVG?
SVG is a graphic format that most closely responds to current web development demands of scalability, interactivity, responsiveness, programmability, performance, and also accessibility.
SVG is a graphic format and is based on XML. It is used to display a variety of graphics on the web. SVG documents are simple plain text files which describes line, curves, shapes, color and text also. It is human readable, easily understood and modified so can be altered with CSS or JavaScript. As a result, it gives flexibility and versatility which can never be matched by traditional PNG, GIF or JPGs. SVG is a W3C standard, that means it can inter-operate easily with other open standard languages and technologies such as JavaScript, DOM, CSS and HTML. Upto the time W3C sets the global industry standards, it appears to be likely SVG will continue to be the de-facto standard for vector graphics in the browser.
Use cases of SVG-
1. Logos and Icons-
Logos and icons mostly share the same need to be clear and sharp at any size. This makes SVG an ideal. SVG icons are more accessible and also much easier to position.
Using the <img> tag-
This is a basic solution to create SVG using <img>tag. It requires only the simple <img> tag that you have used with most of the JPDs, GIFs and PNGs.
This is an easy way to use SVG files. You can control image size as per your requirement using width and/or height attributes, but you can’t control color. This technique is fully compatible with all modern browsers except IE8 (and older IEs) and also early model Android phones. In some cases both width and height are required for a correct display.
2. Logos and Icons using IE8 fallbacks-
There are multiple ways to provide legacy browser compatibility, if you require it. In each case, you’ll need to provide PNG files to replace your SVGs.
Prefer a gracefully degrading technique that requires that all files use the same names and share the same path. It also requires Modernizr.
A few lines of javascript will do the trick:
if(!Modernizr.svg) {
var imgs = document.getElementsByTagName(‘img’);
for(var i = 0; i < imgs.length; i++) {
var this_src = imgs[i].src;
if(this_src.match(/(\.svg)$/)) {
imgs[i].src = this_src.replace(/(\.svg)$/, ‘.png’);
}
}
}
You can also load an SVG image using the object or iframe tags. Each provides a markup-only way to load fallback images:
<object data=”svg_image.svg” type=”image/svg+xml”>
<!– the following image is displayed if browser can’t load svg image –>
<img src=”fallback.png” alt=”fallback image”>
</object>
2. Animations-
You can create engaging animations, even special kinds of animation and also including SVG line drawings. SVG can interact with CSS animation, as well as its own built-in SMIL animation ability.
When you use inline SVG, all that SVG code is written in the HTML, and thus in the DOM. You can style them just like you would a <div>, <h1>, or any other HTML element. CSS styling brings the possibility of animations and transitions.
3. Get two colors use-
We know that a limitation of using <use> to insert a bit of SVG is that you can’t write compound CSS selectors that affect through there.
For instance:
SVG-
<svg class=”parent”>
<!– shadow DOM boundary is effectively here –>
<use class=”child”>
<!– stuff <use> references gets cloned in here –>
</use>
<!– end shadow DOM boundary –>
</svg>
That shadow DOM boundary prevents selectors like-
/* nope */
.parent .child {
}
Maybe someday we’ll get a working CSS selector to penetrate that shadow DOM boundary, but as of this writing it’s not here yet.
You set the fill on the <svg> parent and that will cascade down through, but that only gets you one color (remember to not set the presentational fill attribute on those shapes! ).
Set the fill CSS property on any shapes you like to currentColor:
CSS-
.shape-1, .shape-2 {
fill: currentColor;
}
That way when you set the color property on the parent <svg>, that will also cascade through. It won’t do anything all by itself (unless you have <text> in there), but current Color is based off of color so you can use it for other things.
svg.variation-1 {
fill: red;
color: orange;
}
svg.variation-2 {
fill: green;
color: lightblue;
}
4. Styling Inline SVG-
Inline SVG can be “styled” in the sense that it already has fills and strokes and whatnot the second you put it on the page. That’s nice and a totally clear way to use inline SVG. But you can also style inline SVG through CSS, which is a kind of awesome because, CSS is where we feel powerful and comfortable. It works pretty much how you would expect.
5. Animating SVG with JavaScript-
Advantage to go with JavaScript for SVG animations is support also. There are plenty of quirks to be concerned about while animating SVG. Some browsers don’t support transforms on elements. While some browsers do unexpected things with page zooming. Some are inconsistent with transform-origin. JavaScript libraries always help with these problems. While we’re talking about animation specifically, many JavaScript SVG libraries are about working with SVG in general. They can create and control it and also access properties from the element and change them, etc. Kinda like adding a more robust API to SVG.
6. SVG Text-
There is one <text> element in SVG. This is casual here: it is for putting a text into the SVG. Not only just outlines of shapes of letters (although you can do that too) but also actual normal web text. That text can be selectable, SEO-friendly, accessible, normal web text. The fonts you have access to are the same as the remaining of the document. So if you load an @font-face font, you’ll be able to use that in the SVG.
7. Can put raster images in SVG-
There probably isn’t a tremendously huge use-case for this, other than the obvious: you need a raster graphic among other things in a larger SVG design. Similarly it moves and scales with the rest of the elements. The syntax is:
<svg … >
<image xlink:href=”/path/to/image.jpg” width=”100%” height=”100%” x=”0″ y=”0″ />
</svg>
You’d most likely never drop a raster realistic in a SVG all by itself as there isn’t any advantages to it. Yes, you can apply SVG filters to the image then, but you can apply SVG filters to an <img> as well. Same goes for clipping paths and masks also.
8. SVG Filters on SVG and HTML Elements-
You can apply filters to any element from CSS. But there is also filters you can define within SVG. You can apply it to an element right in the SVG like:
SVG-
<svg>
<!– could be anything –>
<image filter=”url(#pictureFilter)” xlink:href=”image.jpg” width=”100%” height=”100%” x=”0″ y=”0″ />
</svg>
There are a lot SVG filters. Familiar ones like blur, and weird ones that apply painterly effects.
9. Optimizing SVG tools-
Here we’ll look at optimizing SVG with tools. Tools are those that can reduce the file size of SVG without (hopefully) changing the look of it. Things that are perfect for automation. Like:
- Removing whitespace
- Reducing the precision of numbers
- Removing metadata cruft
The most popular tool for that is SVGO. It is a node-based command tool for optimizing SVG this way. It has a GUI version, so you can just drag-and-drop as well like something like ImageOptim.
If you’re working with SVG a lot, like you’re building out an icon system, may be it will be the best to use the tool into the build system.
10. Using Gruntation-
Grunticon is a Grunt plugin for automating an SVG icon system. It takes a folder full of SVG and processes them into a CSS file. There are a bunch of selectors in there, based on the file names of the SVG images, that have a background-image of the SVG data URI.
11. Clipping and Masking-
The concept of clipping and masking is simple. Hide certain parts of elements and show remaining. The main difference between them is also simple. Clipping is always a vector path, where inside the path is visible and outside the path is not.
Where a mask is an image. This image is treated as a grayscale image where the black parts mask the image to transparency and the white parts let the image through.
Implementing clipping and masking isn’t particularly easy. Because browser support for it (and all the little ins-and-outs) is quite varies. We try and go through all of it in this screencast, struggles and all.
The syntax for all the possibilities is:
CSS-
.clip-me {
/* referencing path from an inline SVG <clipPath> */
clip-path: url(#c1);
/* circle */
clip-path: circle(30px at 35px 35px);
/* Masking */
/* mask-image, mask-position, mask-repeat, mask-clip, mask-size … */
mask: url(mask.svg);
mask-type: luminance || alpha;
-webkit-mask-box-image: url(stampTiles.svg) 30 repeat;
mask-border: url(stampTiles.svg) 30 repeat;
}
Please contact us if you have any Web Development projects. We have got plenty of experience in Web and mobile application Development service.
No comments:
Post a Comment