Responsive svg path

Every second Tuesday, we send a newsletter with useful techniques on front-end and UX.

responsive svg path

In fact, we can see SVG as an independent module that encapsulates CSS for the customization of views as well as the responsive behavior that also encapsulates JavaScript for the interaction logic. It follows a well-known technique: image sprites. Image spriting is a technique that was previously used only for raster images to combat poor network performance. The idea is to combine a lot of small images into a single fileso that the client has to download only a single image from the server.

You would also use CSS to shift the image around and display only the part that you need for a particular element, saving the user the overhead of having to download every image individually.

Read more about sprites on CSS-Tricks. This is what all of his icons combined into a single file would look like:. All Icons combined in a single SVG file. Large View.

Subscribe to RSS

This file, then, would be set as the background of a container in which one of these icon would need to be displayed:. The example above is simple enough but has some problems. The solution is not portable enough. Of course, that leaves us with a layered mess of icons:.

See the Pen inxym by Ilya Pukhalski. Resize your browser to see how the example below works:. Looking to the content choreography and layout restructuring tricks that we rely on for responsive Web design on a daily basis, we can improve our prototype even still.

The result is much more readable, and applying any transformations to any part of the icon is now possible:. See the Pen Azqyn by Ilya Pukhalski.

Our redrawn icon looks the same as the biggest one from the sprite but contains many more shapes and takes up a bit more space. Open the example below in a new window and resize it to see all of the icon variants. One more thing. Making the icon respond to changes in its parent container at least the width and height is possible, too.

To do this, first, I tried to load the SVG file in an img element, wrapped in a div.

How to Make an Interactive and Responsive SVG Map of US States & Capitals

But not even one media query in the SVG file seemed to work. My second attempt was to load the icon in the flexible object element, wrapped in a div. Doing that made all of the media queries work. And making an object fill the space of its parent is now possible, too. As for other ways to embed SVG with media queries and transforms, you could use SVG as a background image for any block element.

Inline SVG is allowed as well, but the media queries would respond to the viewport. The example below demonstrates how the icon responds to different container sizes. The media queries in the SVG handle how the icon is drawn, according to the dimensions that the SVG is to be rendered in. Here are eight blocks with different sizes, embedded with one and the same SVG file. See the Pen hszLl by Ilya Pukhalski. More good news!Karen Menezes works towards an open, adaptive web that is accessible to all.

She has an inexplicable love for CSS and responsive user interfaces. In her … More about Karen Menezes …. Every second Tuesday, we send a newsletter with useful techniques on front-end and UX. You will begin to think outside the boxliterally, and hexagons, stars and octagons will begin to take form on your web pages.

While the focus of this article is on clip-path using polygons with CSS, all of the demos provide a reference to an inline SVG, in order to gain additional support on Firefox. Clipping, with the clip-path property, is akin to cutting a shape like a circle or a pentagon from a rectangular piece of paper. The first part, i. The second part, i. The region inside this path is displayed, and everything beyond or outside it is clipped out.

There is an older CSS 2. It has been deprecated in favor of clip-path. As you may have gathered from observing the demo above in different browsers, support for clipping paths is quirky and currently depends on the means by which you choose to clip an element:. Note: There is a caveat with support for SVG clipping path. References to external SVGs are supported only in Firefox, as evidenced in the demo above.

The Chromium project is tracking this bug. The demos below focus on using different kinds of polygons in a design. The syntax for the other basic shapes i. Polygons, however, open the door to a practically infinite numbers of shapes. Each argument pair in the list represents the x-axis and y-axis coordinates of that particular vertex of the polygon. Dudley Storey has more on this process.Note: All of the commands above can also be expressed with lower letters.

Capital letters means absolutely positioned, lower cases means relatively positioned. The example below defines a path that starts at position ,0 with a line to position 75, then from there, a line toand finally closing the path back toGenerally, the user selects two endpoints and one or two control points.

How to Create Responsive SVG Images

Because of the complexity involved in drawing paths it is highly recommended to use an SVG editor to create complex graphics. If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:. HOW TO. Your message has been sent to W3Schools. W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content.

While using this site, you agree to have read and accepted our terms of usecookie and privacy policy. Copyright by Refsnes Data.

All Rights Reserved. Powered by W3.Learn Development at Frontend Masters. The following is a guest post by Amelia Bellamy-Royds. Here, she shares an epic guide to scaling SVG, covering all the ways you might want to do that.

This year, you are going to start using SVG in your web designs. You create a fabulous header logo in Inkscape and you copy and paste the SVG code it spits out into your WordPress header file. Until you open up your web page in test browsers and discover that some leave huge blocks of whitespace above and below the image, while others crop it off too short. So, scaling SVG should be easy, right?

SVG looks great at any scale, but it can scale in so many different ways that getting it to behave just the way you want can be confusing for SVG beginners. The image file describes how the browser should color in a grid that is a certain number of pixels wide and a certain number of pixels tall. An important side effect is that raster images have a clearly defined aspect ratio : the ratio of width to height. You can force the browser to draw a raster image at a different size than its intrinsic height and width, but if you force it to a different aspect ratio, things will get distorted.

For this reason, since the early days of the web there has been support for auto scaling on images: you set the height or the width, and the browser adjusts the other dimension so that the aspect ratio stays constant.

The following example uses inline SVG, adjusting the dimensions of the element dotted linewithout ever altering the size of the drawn graphic:. Why does it behave this way? SVG is a document. Same with SVG. By default, it will be drawn at the size specified in the code, regardless of the size of the canvas.

What happens if you set the height or width or both to auto for these SVGs? The default size for HTML replaced elements will be used: px wide, px tall. Below, I describe the code you need to get the scale you want for the most common situations:. Other images scale because the browser knows the height, width, and aspect ratio of the image, and it adjusts everything together. Giving SVG these properties is the first step to getting it to scale.

However, scaling SVG goes beyond what is possible with other images. A first glance at the SVG specifications would suggest that the height and width attributes on the top-level svg element will implicitly set an aspect ratio and therefore make SVG scale like other images. So forget height and width. What you want is to set an aspect ratio for the image, and have the drawing scale to fit. You want a viewBox. The SVG viewBox is a whole lot of magic rolled up in one little attribute.

The viewBox does many things:.By using our site, you acknowledge that you have read and understand our Cookie PolicyPrivacy Policyand our Terms of Service.

responsive svg path

The dark mode beta is finally here. Change your preferences any time. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information. However, I having trouble getting it to work.

Creating Responsive Shapes With Clip-Path And Breaking Out Of The Box

I also looked at similar questions on StackOverflow and other examples, but they mostly deal with basic shapes and not the path variable. The idea is that changing the width or height of the. However, as soon as I add this the clipped image disappears. I suspect that the path specified by the path element is not in relative units, however I don't know how to change the units to relative.

responsive svg path

This answer distorts the shape of the clip path so that it always spans the whole image, regardless of its aspect ratio. You have to scale down the path for that. Fortunately, the viewBox for your path names its dimensions. Both the SVG 1.

the new code

Learn more. Asked 1 year, 4 months ago. Active 4 months ago. Viewed times. Where I think I'm going wrong I suspect that the path specified by the path element is not in relative units, however I don't know how to change the units to relative.

Thanks in advance for all responses! Ron Ron 1 1 silver badge 7 7 bronze badges. The M0, Imagine you changed units from 3 inches to 3 kilometres, you wouldn't expect that to be the same distance. RobertLongson Thanks for your reply. How do I change these units to relative units though? When handling basic shapes, this is pretty simple, but how do I accomplish this with a more complex shape like in the example?

There are two ways this can go when the aspect ratio of the image changes: either the aspect ratio of the clip-path adapts to that of the image distorting the shapeor the clip path retains its aspect ratio, but does not stretch to all borders of the image. Which way do you want this to work? Either way would be fine though. Active Oldest Votes. I'm going with his comment to my question. But you are right, I should spell that out in the answer for posteriority.

Thanks for your answer. I chose this as the accepted answer because it answers my question more completely. SVG will always be responsive if only viewBox is specified. Therefore, the path formative clip-path will also be responsive. When the image is a part of the SVG, like in your example, it is responsive. So that's a step in the right direction. However, for my purpose, I need it to work when the image is outside the SVG and the path referenced via a clip path.Animating an element along a path is something we as developers would normally reach for a big old JS library like GSAP for.

To create a path animation we need to use offset-path with a value of the path we want to animate along the syntax is like an SVG pathand animate the offset-distance property:. We can also change the rotational behaviour and position of the animated object using offset-rotate and offset-position respectively, which could allow for some cool effects. In this demo you can see the effect of offset-rotate when compared to the default: the second object does not rotate relative to the path, but remains fixed.

responsive svg path

I was also interested in being able to show the actual path the elements are moving along. Our CSS file becomes very messy when we include a complicated path with many coordinates! If we try and change the SVG width then the path remains at its original size. This article from CSS Tricks breaks it down in finer detail.

In the second of the two demos at the beginning of this article, the animation moving the object along the path loops through twice for every cycle of the stroke animation. Using stroke-dashoffset the line is drawn in and then out again going from a positive to a negative offset valueso it appears to be drawn and then subsequently erased:.

To make the animation feel more natural I added a box shadow while the object was moving — this creates a kind of motion blur effect, and feels much smoother:. At the time of writing, offset-path is only supported in Chrome — although it can be enabled in Firefox with the layout.

Dan Wilson has created useful selection of Codepen demos that demonstrate the different properties of Motion Path. Thanks Adam Kuhn for pointing me in his direction! Simple path animation To create a path animation we need to use offset-path with a value of the path we want to animate along the syntax is like an SVG pathand animate the offset-distance property:.Here's the GitHub Repo for you to clone.

Making an interactive and responsive map is much easier than you would think. The goal is to make it so that hovering over a state will display the name of the state, along with its capital. Additionally, it will be able to adapt to any screen size.

By the end of this tutorial you'll be able to do this using any map you'd like. This is useful if you want to show interactive maps of the world, countries, or states. An excellent application of this is CNN's interactive primaries map. You would normally start by searching on Google for a map of the United States in. For the sake of this tutorial, let's use the one from Wikipedia.

A lot of people don't know this, but SVG files can be opened using any text editor. Do this and paste it into your favorite text editor. Notice how there are a bunch of path tags with ids? Each path in the code corresponds to a state. You'll see that only Florida is orange. The other states have the color D3D3D3 because that's what it's set to in the xml code. Now delete the orange fill and go back to the SVG code. If you change the viewport size, you'll notice that the map is not responsive.

In order to fix that simply add the following code to your CSS file. Now if you shrink the viewport, the SVG is responsive. The problem is that the map isn't aligned at the top. This forces the map to stay at the top when shrinking the viewport. Next we want to make it so that hovering over a state causes it to change colors let's use which is Old Glory Blue from the US flag. We'll take advantage of CSS hover to accomplish this.

The cursor should be a pointer, and the outline stroke will also be blue. It's time to display the state name and capital on hover. This box will show state name and capital. Let's style it by using the code below.

To complete the trifecta of American flag colors, we'll use white for the background color. The z-index needs to be set to 1 to make the box appear in front of the map.