This content originally appeared on Level Up Coding - Medium and was authored by Dev Wanderer
SVG have the appearance of images, the flexibility of Canvas, and the Styling of CSS.
Scalable Vector Graphics (SVG) are more powerful than many developers realize. They can add a variety of graphics to your sites — from simple logos, to complex interactive art. Let’s take a look at what they are, as well as how and when to work with them.
SVG are DOM Elements!
SVG can be manually added to your HTML without any JavaScript. This is done like any other basic element, by adding an <svg> tag. It also has its own child tags that can handle the basics of drawing the graphics you want.
<html>
<head>
<title>SVG Example</title>
</head>
<body>
<svg>
<circle cx="50" cy="50" r="40" stroke="red" fill="yellow" />
</svg>
</body>
</html>
That will produce a yellow circle located at 50,50 within the SVG. It will have a red border stroke, and yellow fill. It has a radius of 40. It looks like this:
This also means that you can use CSS to style the SVG elements, just like you do with other DOM elements on the page. Let’s add a general circle rule to the CSS, by adding this to the head section of our HTML:
<style>
circle {
stroke-width: 5;
stroke: blue;
r: 20;
}
</style>
With that styling applied, we now get a circle on the page, that looks like this.
Of course, JavaScript also creates and manipulates DOM elements, so it too can be used for working with SVG. Maybe we want to check the fill color to green when the circle is clicked. We can use the following code to body section, to accomplish that. Notice that I added an id attribute to the circle element, for convenience in referencing it here.
<script>
document.querySelector("#myCircleButton").addEventListener("click",(e) => {
console.log(e)
e.target.style.fill = "green";
})
</script>
We could also add new elements if we wanted. Since it is part of the DOM, we can then inspect it, in the browser’s developers tools. We don’t need to write all this logic for ourselves though, as the next section will explain.
SVG Libraries
There are a variety of popular libraries to help us create, style, and manipulate SVG in our web pages.
D3 may be the most powerful SVG library available for JavaScript. It can be used to create a wide range of data driven visualizations like charts, graphs, or maps. It can also help with user interactions. In fact if you google some samples, you’ll likely be blown away. Here’s a basic code example of how we could use it to add create a circle on a web page.
<html>
<head>
<title>SVG Example</title>
<script src="https://cdn.jsdelivr.net/npm/d3@7.8.3/dist/d3.min.js"></script>
</head>
<body>
<svg id="svg"></svg>
<script>
const svg = d3.select("#svg")
.attr("width", 100)
.attr("height", 100);
svg.append("circle")
.attr("cx", 50)
.attr("cy", 50)
.attr("r", 40)
.attr("fill", "cyan")
.attr("stroke", "black")
</script>
</script>
</body>
</html>
Snap.svg is an easy to start with library. It can read and manipulate existing SVG with a simple interface. Here’s a quick sample HTML file that includes JavaScript to handle our SVG steps.
<html>
<head>
<title>SVG Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg.js"></script>
</head>
<body>
<svg id="svg"></svg>
<script>
const s = Snap("#svg");
const circle = s.circle(50, 50, 40);
circle.attr({
fill: 'cyan',
stroke: 'magenta',
strokeWidth: 5
});
</script>
</body>
</html>
SVG tools are not limited to the JavaScript libraries. It is likely that many other frameworks you like are already using SVG for visualizations, under the hood. These may not even be JavaScript based. These may be deal primarily with CSS styles.
One interesting example is the popular icon library, FontAwesome. Its icons are drawn as SVG which is why there isn’t some large folder of images to be downloaded. This is also why they have such flexible styling — for changing colors, sizes, or even animating.
When to use SVG vs Canvas — or CSS, or Image?
When unsure if a canvas is necessary, you can probably use an SVG. The exceptions will likely be when you are making a highly interactive animation with a large number of moving objects — typically, a game. Depending on your game though, there may be cases where SVG works great.
In some cases simple CSS drawing my be sufficient, but SVG is built for a wide range of complex rendering and will generally give easier access to otherwise complicated actions. The great thing though is that you can still use CSS to customize your SVG.
Finally, SVG is more flexible than a static image and the rendering is more crisp, especially at a larger zoom size. It is also great for something like a logo, that is simple to draw, should look nice at various sizes, and doesn’t require downloading image files. Plus, of course, SVG isn’t static. This is normally an easier choice than the other options.
Conclusion
Good front end developers and UX designers should be familiar with SVG and know when to use them. Keeping this tool at your disposal will give you a shortcut to visual excellence that not of all your peers will be familiar with. Give it a try on your next project and take your graphics to the next level!
Level Up Coding
Thanks for being a part of our community! Before you go:
- 👏 Clap for the story and follow the author 👉
- 📰 View more content in the Level Up Coding publication
- 💰 Free coding interview course ⇒ View Course
- 🔔 Follow us: Twitter | LinkedIn | Newsletter
🚀👉 Join the Level Up talent collective and find an amazing job
SVG Tips to be a Better Front End Developer was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by Dev Wanderer
Dev Wanderer | Sciencx (2023-04-12T17:27:56+00:00) SVG Tips to be a Better Front End Developer. Retrieved from https://www.scien.cx/2023/04/12/svg-tips-to-be-a-better-front-end-developer/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.