Thread

Ha!

Oct 6, 2017

Is there a way to make svgs responsive?

I'm particularly interested in exploring dataviz (preferably with D3.js), which is responsive in and of itself - not just it's container or such.

#javascript #d3js #responsive #data-visualisation

Responses(5)

Ibrahim Tanyalcin

{intrst:"Scnc&Art",msc:"admin@MutaFrame",strive:"Experiment&Learn",loves:"ES5",hates:"bandwagon",lang:"Javascript",twttr:"@ibrhmTanyalcin"}

1. Using 'resize' event

There are 3 things you need to keep in mind:

the object that draws the chart where there will be a main svg. This svg is accessible at either from a key within itself or any node under this svg such as rect.ownerSVGElement
The 'viewport' of the above svg and the 'style' are different. Viewport defines userSpace whereas style defines how it will be painted by the browser. For example viewport can be "0 0 1000 1000" meaning x0 is 0, y0 is 0, width is 100 0 and height 1000 units (user space units). However the style can be 100px width and 100px height.
Combine the above 2 with the window.onresize event or window.addEventlistener("resize", ....)

In short, a function will be triggered (onresize) which in turn invokes a method in the object which in turn modifies the svg.

2. Using css media queries

This one is straight forward. You define a media query such as:

```

@media screen and (max-width: 980px) {

#mySVG {

....

}

} ```

There are also some other ways, but these are the main ones that came to my mind

Ben Buchanan (200ok)

I make some bits of the web.

Oct 7, 2017

Yes... have a look at madebymike.com.au/writing/svg-has-more-potential for a great overview and this tweet from Mike for more recommendations.

Ha!

Oct 8, 2017

Thanks lad! Much appreciated!

Aaron Cooper

UK Software Engineer in Singapore

Oct 6, 2017

Not really, to my knowledge. The two main ways I'm aware of are:

Place the HTML SVG tag inside a container with appropriate styling on the container and SVG element
Use JavaScript to listen for browser resize events and update the dimensions of the SVG

The most common way being the second for libraries that enable drawing graphics/charts.

Emil Moe

Senior Data Engineer

Oct 6, 2017

I'm a bit confused here, because SVG is vector based and therefore responsive by default

I was probably a bit vague. An example. I have a simple line chart which on a desktop goes from left to right as you would expect it. On mobile devices this chart is rendered unreadable, so I decide to flip the x- and y-axis'.

So I basically need to do 2 things here: Manipulate the height and width atrributes of the svg and then make the drawing inside the svg dependent on the screen size. I guess this is doable if you put the time and effort into it, but I was wondering if there is some established "easier" way.

Jason Knight

The less code you use, the less there is to break

Oct 7, 2017

Only draw the parts that NEED to be SVG in the SVG -- break it into the smaller subsections and then use markup and CSS to handle the rest.

Basically, don't slop it all into one SVG file and magically expect it to work. Same reasons one shouldn't use images as text, or try to create complex interactions between perfect size images and text content; it's all "not viable for web deployment" concepts.

Though IMHO, "not viable for web deployment" describes a LOT of what people are doing with SVG right now. It's cute for an icon or two, anything more is typically just telling users to go plow themselves.

ESPECIALLY if you're slopping it into the markup missing caching opportunities across pages.

Search Hashnode

Is there a way to make svgs responsive?

Responses(5)

1. Using 'resize' event

2. Using css media queries

Recent threads