0

I have another no doubt silly question, I was hoping to get help with. Traditionally I come from a more Print media background, but I am currently attempting to build my website through WordPress and have run into a few issue. The main one is trying to use .svg file in my website.

I've installed the "SVG Support" plugin, which is allowing me to upload the files, however my issue has been defining the size of the file when it's displayed. I realise that an svg file isn't an image file, it's a document, and making it a certain size in illustrator doesn't really matter as it's a vector not a raster and will scale well. But I'm trying to figure out how do I then define what size I want the file to be displayed at on the web page.

I have gone down a deep dark rabbit hole of article after articles, thoroughly confusing myself in the process. Some articles have suggested some css code, this didn't seem to work for me (although I could have done it wrong). However, from what I can gather most article seem to suggest downloading a program called "Inkscape" and defining the size of the file in a 'viewbox'? And I'm like "What the hell is a viewbox?!" and is this something I could do just in illustrator? lol

At the end of the day all I want is to have .svg graphics that will scale in proportion. Does anyone have any suggestions on how they go about using .svg files on their website? Thank you for your time, I appreciate the assistance.

  • Viewbox: is the artboard size. – Luke Aug 18 '17 at 6:51
  • Could you clarify how you're using the SVG? As a background image? as an <img> or including the <svg> code directly? – Cai Aug 18 '17 at 7:48
2

To keep it simple, you can upload the .svg files on wordpress and include them in your html code just like other image formats such as:

<img src="img/demo.svg" width="200" height="200">

OR

<img src="img/demo.svg" style="width: 200px; height: 200px;">

OR

<img src="img/demo.svg" class="demo">

.demo{
width:200px;
height: 200px;
}

a little help from here: https://css-tricks.com/using-svg/

Also, you can use the svg files as a svg sprite: https://css-tricks.com/svg-sprites-use-better-icon-fonts/

  • Awesome thanks heaps, and the links were very informative. So as long as I set the width and height at the correct proportions initially, the graphic will scale in those proportions across multiple devices and displays? – Permanoob Aug 18 '17 at 22:42
  • Yes, the SVG will act as an image and handling the width, height from css will allow you to set the proportions. In case of issues across multiple devices, you need to use media queries to adjust the image just like any raster image – Usman Mani Aug 25 '17 at 6:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.