: 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

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

: Inkscape: How to write text on anchor path I have some circles. I want to write text inside them but the text path needs to be circle also not straight. How can I do this in inkscape?

@Berumen635

Posted in: #Inkscape #Text

2 Comments

: Should I use 4x or 4✕? I am editing the text of a medical document. We are describing the function of the heart. METS (metabolic equivalent for task) = the number of calories and the

@Berumen635

Posted in: #Typography

3 Comments

: Pixelated png images I'm in the process of building my first wordpress website. So far I have uploaded most of my logos etc as .svg files and everything seems to be working great. However

@Berumen635

Posted in: #Png #Resolution #WebsiteDesign

4 Comments

: I have both adobe Photoshop 6.0 and 7.0. How do i save multiple sets automatically, as say, JPG files? Thanks for looking but please do not answer with solutions to Photoshops that are newer

@Berumen635

Posted in: #AdobePhotoshop

2 Comments

Login to post a comment!

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

Feed

: 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

More posts by @Berumen635

: Inkscape: How to write text on anchor path I have some circles. I want to write text inside them but the text path needs to be circle also not straight. How can I do this in inkscape?

: Should I use 4x or 4✕? I am editing the text of a medical document. We are describing the function of the heart. METS (metabolic equivalent for task) = the number of calories and the

: Pixelated png images I'm in the process of building my first wordpress website. So far I have uploaded most of my logos etc as .svg files and everything seems to be working great. However

: I have both adobe Photoshop 6.0 and 7.0. How do i save multiple sets automatically, as say, JPG files? Thanks for looking but please do not answer with solutions to Photoshops that are newer

Login to post a comment!

1 Comments

Back to top | Use Dark Theme