Mobile app version of vmapp.org
Login or Join
Berumen635

: SVG Graphics for Website 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

@Berumen635

Posted in: #AdobeIllustrator #Svg #WebsiteDesign

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.

10.01% popularity Vote Up Vote Down


Login to follow query

More posts by @Berumen635

1 Comments

Sorted by latest first Latest Oldest Best

 

@Sarah814

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: css-tricks.com/using-svg/
Also, you can use the svg files as a svg sprite: css-tricks.com/svg-sprites-use-better-icon-fonts/

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme