SVG Coding Examples: Useful Recipes For Writing Vectors By Hand

Home > Others > SVG Coding Examples: Useful Recipes For Writing Vectors By Hand

SVG Coding Examples: Useful Recipes For Writing Vectors By Hand

September 18th, 2024 Leave a comment Go to comments

Even though I am the kind of front-end engineer who manually cleans up SVG files when they are a mess, I never expected to become one of those people. You know, those crazy people that draw with code.

But here we are.

I dove deep into SVG specs last winter when I created a project to draw Calligraphy Grids, and even though I knew the basic structures and rules of SVG, it was only then that I fully tried to figure out and understand what all of those numbers meant and how they interacted with each other.

And, once you get the hang of it, it is actually very interesting and quite fun to code SVG by hand.

No ahead

We won’t go into more complex SVG shapes like paths in this article, this is more about practical information for simple SVGs. When it comes to drawing curves, I still recommend using a tool like Illustrator or Affinity. However, if you are super into compounding your lines, a path is useful. Maybe we’ll do that in Part 2.

Also, this guide focuses mostly on practical examples that illustrate some of the math involved when drawing SVGs. There is a wonderful article here that goes a bit deeper into the specs, which I recommend reading if you’re more interested in that: “A Practical Guide To SVG And Design Tools.”

Drawing With Math. Remember Coordinate Systems?

Illustrator, Affinity, and all other vector programs are basically just helping you draw on a coordinate system, and then those paths and shapes are stored in SVG files.

If you open up these files in an editor, you’ll see that they are just a bunch of paths that contain lots of numbers, which are coordinates in that coordinate system that make up the lines.

But, there is a difference between the all-powerful and the other, more semantic elements like , , , , , and .

These elements are not that hard to read and write by hand, and they open up a lot of possibilities to add animation and other fun stuff. So, while most people might only think of SVGs as never-pixelated, infinitely scaling images, they can also be quite comprehensive pieces of code.

How Does SVG Work? `unit != unit`

Before we get started on how SVG elements are drawn, let’s talk about the ways units work in SVG because they might be a bit confusing when you first get started.

The beauty of SVG is that it’s a vector format, which means that the units are somewhat detached from the browser and are instead just relative to the coordinate system you’re working in.

That means you would not use a unit within SVG but rather just use numbers and then define the size of the document you’re working with.

So, your width and height might be using CSS rem units, but in your viewBox, units become just a concept that helps you in establishing sizing relationships.

What Is The `viewBox`?

The viewBox works a little bit like the CSS aspect-ratio property. It helps you establish a relationship between the width and the height of your coordinate system and sets up the box you’re working in. I tend to think of the viewBox as my “document” size.

Any element that is placed within the SVG with bigger dimensions than the viewBox will not be visible. So, the viewBox is the cutout of the coordinate system we’re looking through. The width and height attributes are unnecessary if there is a viewBox attribute.

So, in short, having an SVG with a viewBox makes it behave a lot like a regular image. And just like with images, it’s usually easiest to just set either a width or a height and let the other dimension be automatically sized based on the intrinsic aspect ratio dimensions.

So, if we were to create a function that draws an SVG, we might store three separate variables and fill them in like this:

`<svg 
  width="${svgWidth}" 
  viewBox="0 0 ${documentWidth} ${documentHeight}" 
  xmlns="http://www.w3.org/2000/svg"
>`;

SVG Things Of Note

There is a lot to know about SVG: When you want to reuse an image a lot, you may want to turn it into a symbol that can then be referenced with a use tag, you can create sprites, and there are some best practices when using them for icons, and so on.

Unfortunately, this is a bit out of the scope of this article. Here, we’re mainly focusing on designing SVG files and not on how we can optimize and use them.

However, one thing of note that is easier to implement from the start is accessibility.

SVGs can be used in an tag, where alt tags are available, but then you lose the ability to interact with your SVG code, so inlining might be your preference.

When inlining, it’s easiest to declare role="img" and then add a </code> tag with your image title.</p> <p><strong>Note</strong>: <em>You can check out <a target="_blank" href="https://www.smashingmagazine.com/2021/05/accessible-svg-patterns-comparison/" rel="noopener">this article for SVG and Accessibility recommendations</a>.</em></p> <pre><code><svg role="img" [...attr] > <title>An accessible title</title>  </svg> </code></pre> <p>Drawing SVG With JavaScript</p> <p>There is usually some mathematics involved when drawing SVGs. It’s usually fairly simple arithmetic (except, you know, in case you draw calligraphy grids and then have to dig out trigonometry…), but I think even for simple math, most people don’t write their SVGs in pure HTML and thus would like to use algebra.</p> <p>At least for me, I find it much easier to understand SVG Code when giving meaning to numbers, so I always stick to JavaScript, and by giving my coordinates names, I like them immeasurable times more.</p> <p>So, for the upcoming examples, we’ll look at the list of variables with the simple math and then JSX-style templates for interpolation, as that gives more legible syntax highlighting than string interpolations, and then each example will be available as a CodePen.</p> <p>To keep this Guide framework-agnostic, I wanted to quickly go over drawing SVG elements with just good old vanilla JavaScript.</p> <p>We’ll create a container element in HTML that we can put our SVG into and grab that element with JavaScript.</p> <pre><code><div data-svg-container></div> <script src="template.js"></script> </code></pre> <p>To make it simple, we’ll draw a rectangle <code></code> that covers the entire <code>viewBox</code> and uses a fill.</p> <p><strong>Note</strong>: <em>You can add all valid CSS values as fills, so a fixed color, or something like <code>currentColor</code> to access the site’s text color or a CSS variable would work here if you’re inlining your SVG and want it to interact with the page it’s placed in.</em></p> <p>Let’s first start with our variable setup.</p> <div> <pre><code>// vars const container = document.querySelector("[data-svg-container]"); const svgWidth = "30rem"; // use any value with units here const documentWidth = 100; const documentHeight = 100; const rectWidth = documentWidth; const rectHeight = documentHeight; const rectFill = "currentColor"; // use any color value here const title = "A simple square box"; </code></pre> </div> <h3>Method 1: Create Element and Set Attributes</h3> <p>This method is easier to keep type-safe (if using TypeScript) — uses proper SVG elements and attributes, and so on — but it is less performant and may take a long time if you have many elements.</p> <div> <pre><code>const svg = document.createElementNS("<a target="_blank" href="http://www.w3.org/2000/svg%22" rel="noopener">http://www.w3.org/2000/svg"</a>, "svg"); const titleElement = document.createElementNS("<a target="_blank" href="http://www.w3.org/2000/svg%22" rel="noopener">http://www.w3.org/2000/svg"</a>, "title"); const rect = document.createElementNS("<a target="_blank" href="http://www.w3.org/2000/svg%22" rel="noopener">http://www.w3.org/2000/svg"</a>, "rect"); svg.setAttribute("width", svgWidth); svg.setAttribute("viewBox", <code>0 0 ${documentWidth} ${documentHeight}</code>); svg.setAttribute("xmlns", "<a target="_blank" href="http://www.w3.org/2000/svg%22)" rel="noopener">http://www.w3.org/2000/svg")</a>; svg.setAttribute("role", "img"); titleElement.textContent = title; rect.setAttribute("width", rectWidth); rect.setAttribute("height", rectHeight); rect.setAttribute("fill", rectFill); svg.appendChild(titleElement); svg.appendChild(rect); container.appendChild(svg); </code></pre> </div> <p><img decoding="async" src="https://files.smashing.media/articles/svg-coding-examples-recipes-writing-vectors-by-hand/polygon-polyline-composite-fixed.png"></p> <p>Here, you can see that with the same coordinates, a polyline won’t draw the line between the blue and the red dot, while a polygon will. However, when applying a fill, they take the exact same information as if the shape was closed, which is the right side of the graphic, where the polyline makes it look like a piece of a circle is missing.</p> <p>This is the second time where we have dealt with quite a bit of repetition, and we can have a look at how we could leverage the power of JavaScript logic to render our template faster.</p> <p>But first, we need a basic implementation like we’ve done before. We’re creating objects for the circles, and then we’re chaining the <code>cx</code> and <code>cy</code> values together to create the <code>points</code> attribute. We’re also storing our transforms in variables.</p> <div> <pre><code>const polyDocWidth = 200; const polyDocHeight = 200; const circleOne = { cx: 25, cy: 80, r: 10, fill: "red" }; const circleTwo = { cx: 40, cy: 20, r: 5, fill: "lime" }; const circleThree = { cx: 70, cy: 60, r: 8, fill: "cyan" }; const points = <code>${circleOne.cx},${circleOne.cy} ${circleTwo.cx},${circleTwo.cy} ${circleThree.cx},${circleThree.cy}</code>; const moveToTopRight = <code>translate(${polyDocWidth / 2}, 0)</code>; const moveToBottomRight = <code>translate(${polyDocWidth / 2}, ${polyDocHeight / 2})</code>; const moveToBottomLeft = <code>translate(0, ${polyDocHeight / 2})</code>; </code></pre> </div> <p>And then, we apply the variables to the template, using either a <code>polyline</code> or <code>polygon</code> element and a <code>fill</code> attribute that is either set to <code>none</code> or a color value.</p> <pre><code> <svg width={svgWidth} viewBox={`0 0 ${polyDocWidth} ${polyDocHeight}`} xmlns="http://www.w3.org/2000/svg" role="img" > <title>Composite shape comparison</title> <g> <circle cx={circleOne.cx} cy={circleOne.cy} r={circleOne.r} fill={circleOne.fill} /> <circle cx={circleTwo.cx} cy={circleTwo.cy} r={circleTwo.r} fill={circleTwo.fill} /> <circle cx={circleThree.cx} cy={circleThree.cy} r={circleThree.r} fill={circleThree.fill} /> <polyline points={points} fill="none" stroke="black" /> </g> <g transform={moveToTopRight}> <circle cx={circleOne.cx} cy={circleOne.cy} r={circleOne.r} fill={circleOne.fill} /> <circle cx={circleTwo.cx} cy={circleTwo.cy} r={circleTwo.r} fill={circleTwo.fill} /> <circle cx={circleThree.cx} cy={circleThree.cy} r={circleThree.r} fill={circleThree.fill} /> <polyline points={points} fill="white" stroke="black" /> </g> <g transform={moveToBottomLeft}> <circle cx={circleOne.cx} cy={circleOne.cy} r={circleOne.r} fill={circleOne.fill} /> <circle cx={circleTwo.cx} cy={circleTwo.cy} r={circleTwo.r} fill={circleTwo.fill} /> <circle cx={circleThree.cx} cy={circleThree.cy} r={circleThree.r} fill={circleThree.fill} /> <polygon points={points} fill="none" stroke="black" /> </g> <g transform={moveToBottomRight}> <circle cx={circleOne.cx} cy={circleOne.cy} r={circleOne.r} fill={circleOne.fill} /> <circle cx={circleTwo.cx} cy={circleTwo.cy} r={circleTwo.r} fill={circleTwo.fill} /> <circle cx={circleThree.cx} cy={circleThree.cy} r={circleThree.r} fill={circleThree.fill} /> <polygon points={points} fill="white" stroke="black" /> </g> </svg> </code></pre> <p>And here’s a version of it to play with:</p> <p>See the Pen <a target="_blank" href="https://codepen.io/smashingmag/pen/OJeeVoM" rel="noopener">SVG Polygon / Polyline (simple) [forked]</a> by <a target="_blank" href="https://codepen.io/mynimi" rel="noopener">Myriam</a>.</p> <p>Dealing With Repetition</p> <p>When it comes to drawing SVGs, you may find that you’ll be repeating a lot of the same code over and over again. This is where JavaScript can come in handy, so let’s look at the composite example again and see how we could optimize it so that there is less repetition.</p> <p><strong>Observations:</strong></p> <ul> <li>We have three circle elements, all following the same pattern.</li> <li>We create one repetition to change the <code>fill</code> style for the element.</li> <li>We repeat those two elements one more time, with either a <code>polyline</code> or a <code>polygon</code>.</li> <li>We have four different <code>transforms</code> (technically, no transform is a transform in this case).</li> </ul> <p>This tells us that we can create nested loops.</p> <p>Let’s go back to just a vanilla implementation for this since the way loops are done is quite different across frameworks.</p> <p>You could make this more generic and write separate generator functions for each type of element, but this is just to give you an idea of what you could do in terms of logic. There are certainly still ways to optimize this.</p> <p>I’ve opted to have arrays for each type of variation that we have and wrote a helper function that goes through the data and builds out an array of objects with all the necessary information for each group. In such a short array, it would certainly be a viable option to just have the data stored in one element, where the values are repeated, but we’re taking the DRY thing seriously in this one.</p> <p>The group array can then be looped over to build our SVG HTML.</p> <div> <pre><code>const container = document.querySelector("[data-svg-container]"); const svgWidth = 200; const documentWidth = 200; const documentHeight = 200; const halfWidth = documentWidth / 2; const halfHeight = documentHeight / 2; const circles = [ { cx: 25, cy: 80, r: 10, fill: "red" }, { cx: 40, cy: 20, r: 5, fill: "lime" }, { cx: 70, cy: 60, r: 8, fill: "cyan" }, ]; const points = circles.map(({ cx, cy }) => <code>${cx},${cy}</code>).join(" "); const elements = ["polyline", "polygon"]; const fillOptions = ["none", "white"]; const transforms = [ undefined, <code>translate(${halfWidth}, 0)</code>, <code>translate(0, ${halfHeight})</code>, <code>translate(${halfWidth}, ${halfHeight})</code>, ]; const makeGroupsDataObject = () => { let counter = 0; const g = []; elements.forEach((element) => { fillOptions.forEach((fill) => { const transform = transforms[counter++]; g.push({ element, fill, transform }); }); }); return g; }; const groups = makeGroupsDataObject(); // result: // [ // { // element: "polyline", // fill: "none", // }, // { // element: "polyline", // fill: "white", // transform: "translate(100, 0)", // }, // { // element: "polygon", // fill: "none", // transform: "translate(0, 100)", // }, // { // element: "polygon", // fill: "white", // transform: "translate(100, 100)", // } // ] const svg = document.createElementNS("<a target="_blank" href="http://www.w3.org/2000/svg%22" rel="noopener">http://www.w3.org/2000/svg"</a>, "svg"); svg.setAttribute("width", svgWidth); svg.setAttribute("viewBox", <code>0 0 ${documentWidth} ${documentHeight}</code>); svg.setAttribute("xmlns", "<a target="_blank" href="http://www.w3.org/2000/svg%22)" rel="noopener">http://www.w3.org/2000/svg")</a>; svg.setAttribute("role", "img"); svg.innerHTML = "<title>Composite shape comparison</title>"; groups.forEach((groupData) => { const circlesHTML = circles .map((circle) => { return <code><circle cx="${circle.cx}" cy="${circle.cy}" r="${circle.r}" fill="${circle.fill}" /></code>; }) .join(""); const polyElementHTML = <code><${groupData.element} points="${points}" fill="${groupData.fill}" stroke="black" /></code>; const group = <code><g ${groupData.transform ?</code>transform="${groupData.transform}"<code>: ""}> ${circlesHTML} ${polyElementHTML} </g></code>; svg.innerHTML += group; }); container.appendChild(svg); </code></pre> </div> <p>And here’s the Codepen of that:</p> <p>See the Pen <a target="_blank" href="https://codepen.io/smashingmag/pen/XWLLbPq" rel="noopener">SVG Polygon / Polyline (JS loop version) [forked]</a> by <a target="_blank" href="https://codepen.io/mynimi" rel="noopener">Myriam</a>.</p> <p>More Fun Stuff</p> <p>Now, that’s all the basics I wanted to cover, but there is so much more you can do with SVG. There is more you can do with <code>transform</code>; you can use a <code>mask</code>, you can use a <code>marker</code>, and so on.</p> <p>We don’t have time to dive into all of them today, but since this started for me when making Calligraphy Grids, I wanted to show you the two most satisfying ones, which I, unfortunately, can’t use in the generator since I wanted to be able to open my generated SVGs in Affinity and it doesn’t support <code>pattern</code>.</p> <p>Okay, so <code>pattern</code> is part of the <code>defs</code> section within the SVG, which is where you can define reusable elements that you can then reference in your SVG.</p> <h3>Graph Grid with <code>pattern</code><br /> </h3> <p>If you think about it, a graph is just a bunch of horizontal and vertical lines that repeat across the x- and y-axis.</p> <p>So, <code>pattern</code> can help us with that. We can create a <code></code> and then reference a <code>pattern</code> in the <code>fill</code> attribute of the <code>rect</code>. The pattern then has its own <code>width</code>, <code>height</code>, and <code>viewBox</code>, which defines how the pattern is repeated.</p> <p>So, let’s say we want to perfectly center our graph grid in any given width or height, and we want to be able to define the size of our resulting squares (cells).</p> <p>Once again, let’s start with the JavaScipt variables:</p> <pre><code>const graphDocWidth = 226; const graphDocHeight = 101; const cellSize = 5; const strokeWidth = 0.3; const strokeColor = "currentColor"; const patternHeight = (cellSize / graphDocHeight) * 100; const patternWidth = (cellSize / graphDocWidth) * 100; const gridYStart = (graphDocHeight % cellSize) / 2; const gridXStart = (graphDocWidth % cellSize) / 2; </code></pre> <p>Now, we can apply them to the SVG element:</p> <pre><code><svg width={svgWidth} viewBox={`0 0 ${graphDocWidth} ${graphDocHeight}`} xmlns="http://www.w3.org/2000/svg" role="img" > <defs> <pattern id="horizontal" viewBox={`0 0 ${graphDocWidth} ${strokeWidth}`} width="100%" height={`${patternHeight}%`} > <line x1="0" x2={graphDocWidth} y1={gridYStart} y2={gridYStart} stroke={strokeColor} stroke-width={strokeWidth} /> </pattern> <pattern id="vertical" viewBox={`0 0 ${strokeWidth} ${graphDocHeight}`} width={`${patternWidth}%`} height="100%" > <line y1={0} y2={graphDocHeight} x1={gridXStart} x2={gridXStart} stroke={strokeColor} stroke-width={strokeWidth} /> </pattern> </defs> <title>A graph grid</title> <rect width={graphDocWidth} height={graphDocHeight} fill="url(#horizontal)" /> <rect width={graphDocWidth} height={graphDocHeight} fill="url(#vertical)" /> </svg> </code></pre> <p>And this is what that then looks like:</p> <p>See the Pen <a target="_blank" href="https://codepen.io/smashingmag/pen/XWLLbxq" rel="noopener">SVG Graph Grid [forked]</a> by <a target="_blank" href="https://codepen.io/mynimi" rel="noopener">Myriam</a>.</p> <h3>Dot Grid With <code>pattern</code><br /> </h3> <p>If we wanted to draw a dot grid instead, we could simply repeat a circle. Or, we could alternatively use a line with a <code>stroke-dasharray</code> and <code>stroke-dashoffset</code> to create a dashed line. And we’d only need one line in this case.</p> <p>Starting with our JavaScript variables:</p> <pre><code>const dotDocWidth = 219; const dotDocHeight = 100; const cellSize = 4; const strokeColor = "black"; const gridYStart = (dotDocHeight % cellSize) / 2; const gridXStart = (dotDocWidth % cellSize) / 2; const dotSize = 0.5; const patternHeight = (cellSize / dotDocHeight) * 100; </code></pre> <p>And then adding them to the SVG element:</p> <pre><code><svg width={svgWidth} viewBox={`0 0 ${dotDocWidth} ${dotDocHeight}`} xmlns="http://www.w3.org/2000/svg" role="img" > <defs> <pattern id="horizontal-dotted-line" viewBox={`0 0 ${dotDocWidth} ${dotSize}`} width="100%" height={`${patternHeight}%`} > <line x1={gridXStart} y1={gridYStart} x2={dotDocWidth} y2={gridYStart} stroke={strokeColor} stroke-width={dotSize} stroke-dasharray={`0,${cellSize}`} stroke-linecap="round" ></line> </pattern> </defs> <title>A Dot Grid</title> <rect x="0" y="0" width={dotDocWidth} height={dotDocHeight} fill="url(#horizontal-dotted-line)" ></rect> </svg> </code></pre> <p>And this is what that looks like:</p> <p>See the Pen <a target="_blank" href="https://codepen.io/smashingmag/pen/eYwwNQM" rel="noopener">SVG Dot Grid [forked]</a> by <a target="_blank" href="https://codepen.io/mynimi" rel="noopener">Myriam</a>.</p> <p>Conclusion</p> <p>This brings us to the end of our little introductory journey into SVG. As you can see, coding SVG by hand is not as scary as it seems. If you break it down into the basic elements, it becomes quite like any other coding task:</p> <ul> <li>We analyze the problem,</li> <li>Break it down into smaller parts,</li> <li>Examine each coordinate and its mathematical breakdown,</li> <li>And then put it all together.</li> </ul> <p>I hope that this article has given you a starting point into the wonderful world of coded images and that it gives you the motivation to delve deeper into the specs and try drawing some yourself.</p> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div> </div>   <script type="text/javascript" src="http://www.webmastersgallery.com/wp-content/themes/inove/js/comment.js"></script> <div id="comments"> <div id="cmtswitcher"> <a id="commenttab" class="curtab" href="javascript:void(0);">Comments (0)</a> <span class="addcomment"><a href="#respond">Leave a comment</a></span> <div class="fixed"></div> </div> <div id="commentlist">  <ol id="thecomments"> <li class="messagebox"> No comments yet. </li> </ol>   <div class="fixed"></div>  </div> </div> <div id="comment_login" class="messagebox"> You must be <a href="http://www.webmastersgallery.com/wp-login.php">logged in</a> to post a comment. </div> <div id="postnavi"> <span class="prev"><a href="http://www.webmastersgallery.com/2024/09/19/a-beginners-guide-to-using-bluesky-for-business-success/" rel="next">A Beginner’s Guide to Using BlueSky for Business Success</a></span> <span class="next"><a href="http://www.webmastersgallery.com/2024/09/17/clever-polypane-debugging-features-im-loving/" rel="prev">Clever Polypane Debugging Features I’m Loving</a></span> <div class="fixed"></div> </div> </div>   <div id="sidebar">  <div id="northsidebar" class="sidebar">  <div class="widget widget_feeds"> <div class="content"> <div id="subscribe"> <a rel="external nofollow" id="feedrss" title="Subscribe to this blog..." href="http://www.webmastersgallery.com/feed/"><abbr title="Really Simple Syndication">RSS</abbr></a> </div> <div class="fixed"></div> </div> </div>  <div id="text-389627311" class="widget widget_text"> <div class="textwidget"><a href="http://feeds2.feedburner.com/webmastersgallery" title="Subscribe to my feed" rel="alternate" type="application/rss+xml"><img src="http://www.feedburner.com/fb/images/pub/feed-icon32x32.png" alt="" style="border:0"/></a><a href="http://feeds2.feedburner.com/webmastersgallery" title="Subscribe to my feed" rel="alternate" type="application/rss+xml">Subscribe for latest Updates</a></div> </div><div id="text-389629461" class="widget widget_text"> <div class="textwidget"><form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=webmastersgallery', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="webmastersgallery" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" /><p>Delivered by <a href="http://feedburner.google.com" target="_blank" rel="noopener">FeedBurner</a></p></form></div> </div></div>  <div id="centersidebar">  <div id="eastsidebar" class="sidebar">  <div class="widget widget_categories"> <h3>Categories</h3> <ul> <li class="cat-item cat-item-518"><a href="http://www.webmastersgallery.com/category/affiliate-programs/">Affiliate Programs</a> </li> <li class="cat-item cat-item-147"><a href="http://www.webmastersgallery.com/category/design/">Designing</a> </li> <li class="cat-item cat-item-519"><a href="http://www.webmastersgallery.com/category/domain-names/">Domain Names</a> </li> <li class="cat-item cat-item-37"><a href="http://www.webmastersgallery.com/category/e-commerce/">E-commerce</a> </li> <li class="cat-item cat-item-509"><a href="http://www.webmastersgallery.com/category/internet-directories/">Internet Directories</a> </li> <li class="cat-item cat-item-510"><a href="http://www.webmastersgallery.com/category/message-boards/">Message Boards</a> </li> <li class="cat-item cat-item-1"><a href="http://www.webmastersgallery.com/category/uncategorized/">Others</a> </li> <li class="cat-item cat-item-506"><a href="http://www.webmastersgallery.com/category/programming/">Programming</a> </li> <li class="cat-item cat-item-511"><a href="http://www.webmastersgallery.com/category/promotion-and-marketing/">Promotion and Marketing</a> </li> <li class="cat-item cat-item-534"><a href="http://www.webmastersgallery.com/category/scripts-and-programming/">Scripts and Programming</a> </li> <li class="cat-item cat-item-513"><a href="http://www.webmastersgallery.com/category/search-engines/">Search Engines</a> </li> <li class="cat-item cat-item-135"><a href="http://www.webmastersgallery.com/category/social-media/">Social Media</a> </li> <li class="cat-item cat-item-514"><a href="http://www.webmastersgallery.com/category/softwares/">Softwares</a> </li> <li class="cat-item cat-item-515"><a href="http://www.webmastersgallery.com/category/tips-and-tutorials/">Tips and Tutorials</a> </li> <li class="cat-item cat-item-338"><a href="http://www.webmastersgallery.com/category/web-hosting/">Web Hosting</a> </li> <li class="cat-item cat-item-516"><a href="http://www.webmastersgallery.com/category/webmaster-tools/">Webmaster Tools</a> </li> <li class="cat-item cat-item-501"><a href="http://www.webmastersgallery.com/category/webmaster-resources/">Webmasters Resources</a> </li> <li class="cat-item cat-item-3"><a href="http://www.webmastersgallery.com/category/web-design/">Website Design</a> </li> </ul> </div> </div>   <div id="westsidebar" class="sidebar">  <div class="widget widget_links"> <h3>Blogroll</h3> <ul> <li><a href="http://wordpress.org/development/">Development Blog</a></li> <li><a href="http://codex.wordpress.org/">Documentation</a></li> <li><a href="http://wordpress.org/extend/plugins/">Plugins</a></li> <li><a href="http://wordpress.org/extend/ideas/">Suggest Ideas</a></li> <li><a href="http://wordpress.org/support/">Support Forum</a></li> <li><a href="http://wordpress.org/extend/themes/">Themes</a></li> <li><a href="http://planet.wordpress.org/">WordPress Planet</a></li> </ul> </div> </div>  <div class="fixed"></div> </div>  <div id="southsidebar" class="sidebar">  <div class="widget"> <h3>Archives</h3> <ul> <li><a href='http://www.webmastersgallery.com/2024/12/'>December 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/11/'>November 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/10/'>October 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/09/'>September 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/08/'>August 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/07/'>July 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/06/'>June 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/05/'>May 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/04/'>April 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/03/'>March 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/02/'>February 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/01/'>January 2024</a></li> <li><a href='http://www.webmastersgallery.com/2023/12/'>December 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/11/'>November 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/10/'>October 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/09/'>September 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/08/'>August 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/07/'>July 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/06/'>June 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/05/'>May 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/04/'>April 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/03/'>March 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/02/'>February 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/01/'>January 2023</a></li> <li><a href='http://www.webmastersgallery.com/2022/12/'>December 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/11/'>November 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/10/'>October 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/09/'>September 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/08/'>August 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/07/'>July 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/06/'>June 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/05/'>May 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/04/'>April 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/03/'>March 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/02/'>February 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/01/'>January 2022</a></li> <li><a href='http://www.webmastersgallery.com/2021/12/'>December 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/11/'>November 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/10/'>October 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/09/'>September 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/08/'>August 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/07/'>July 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/06/'>June 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/05/'>May 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/04/'>April 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/03/'>March 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/02/'>February 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/01/'>January 2021</a></li> <li><a href='http://www.webmastersgallery.com/2020/12/'>December 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/11/'>November 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/10/'>October 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/09/'>September 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/08/'>August 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/07/'>July 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/06/'>June 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/05/'>May 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/04/'>April 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/03/'>March 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/02/'>February 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/01/'>January 2020</a></li> <li><a href='http://www.webmastersgallery.com/2019/12/'>December 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/11/'>November 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/10/'>October 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/09/'>September 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/08/'>August 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/07/'>July 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/06/'>June 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/05/'>May 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/04/'>April 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/03/'>March 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/02/'>February 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/01/'>January 2019</a></li> <li><a href='http://www.webmastersgallery.com/2018/12/'>December 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/11/'>November 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/10/'>October 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/09/'>September 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/08/'>August 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/07/'>July 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/04/'>April 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/01/'>January 2018</a></li> <li><a href='http://www.webmastersgallery.com/2017/12/'>December 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/11/'>November 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/09/'>September 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/08/'>August 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/07/'>July 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/06/'>June 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/05/'>May 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/04/'>April 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/03/'>March 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/02/'>February 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/01/'>January 2017</a></li> <li><a href='http://www.webmastersgallery.com/2016/12/'>December 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/11/'>November 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/10/'>October 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/09/'>September 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/08/'>August 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/07/'>July 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/06/'>June 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/05/'>May 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/04/'>April 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/03/'>March 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/02/'>February 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/01/'>January 2016</a></li> <li><a href='http://www.webmastersgallery.com/2015/12/'>December 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/11/'>November 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/10/'>October 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/09/'>September 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/08/'>August 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/07/'>July 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/06/'>June 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/05/'>May 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/04/'>April 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/03/'>March 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/02/'>February 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/01/'>January 2015</a></li> <li><a href='http://www.webmastersgallery.com/2014/12/'>December 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/11/'>November 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/10/'>October 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/09/'>September 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/08/'>August 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/07/'>July 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/06/'>June 2014</a></li> <li><a href='http://www.webmastersgallery.com/2013/07/'>July 2013</a></li> <li><a href='http://www.webmastersgallery.com/2013/01/'>January 2013</a></li> <li><a href='http://www.webmastersgallery.com/2012/12/'>December 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/08/'>August 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/07/'>July 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/06/'>June 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/05/'>May 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/04/'>April 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/01/'>January 2012</a></li> <li><a href='http://www.webmastersgallery.com/2011/11/'>November 2011</a></li> <li><a href='http://www.webmastersgallery.com/2011/06/'>June 2011</a></li> <li><a href='http://www.webmastersgallery.com/2011/03/'>March 2011</a></li> <li><a href='http://www.webmastersgallery.com/2011/02/'>February 2011</a></li> <li><a href='http://www.webmastersgallery.com/2011/01/'>January 2011</a></li> <li><a href='http://www.webmastersgallery.com/2010/12/'>December 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/11/'>November 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/09/'>September 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/07/'>July 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/06/'>June 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/05/'>May 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/02/'>February 2010</a></li> <li><a href='http://www.webmastersgallery.com/2009/12/'>December 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/08/'>August 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/07/'>July 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/06/'>June 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/05/'>May 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/04/'>April 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/03/'>March 2009</a></li> </ul> </div>  <div class="widget"> <h3>Meta</h3> <ul> <li><a href="http://www.webmastersgallery.com/wp-login.php">Log in</a></li> </ul> </div> </div>  </div>  <div class="fixed"></div> </div>   <div id="footer"> <a id="gotop" href="#" onclick="MGJS.goTop();return false;">Top</a> <a id="powered" href="http://wordpress.org/">WordPress</a> <div id="copyright"> Copyright © 2009-2024 Webmasters Gallery </div> <div id="themeinfo"> Theme by <a href="http://www.neoease.com/">NeoEase</a>. Valid <a href="http://validator.w3.org/check?uri=referer">XHTML 1.1</a> and <a href="http://jigsaw.w3.org/css-validator/check/referer?profile=css3">CSS 3</a>. </div> </div>  </div>  </div>  </body> </html>

Webmasters Gallery