In an effort to continue to find answers to my issue in the preceeding post: http://www.inkscapeforum.com/viewtopic.php?f=14&t=33417. I have done a bunch of research into using viewBox. However, now I have questions regarding getting a SVG file into the viewBox using <img> or <object> tags. The way I am doing it doesn't seem to be working. Most of the examples that I seen on the web use the SVG code. The SVG file I am using started as jpg file I imported into Inkscape, so the code is quite long. I would like to link the SVG file, rather than paste all the code inline. This link to my personal testing domain: http://holtstest.000webhostapp.com/, has three example of my efforts displayed. The red border is the parent div and the dotted blue border is the viewBox. The first uses an <object> tag and the second uses an <img>. As you can see in the first two examples the images fall below the viewBox. The third, which works, I pasted the SVG code inline. Any help would be greatly appreciated.

I don't understand what you're trying...

If you do not need the picture to use any javascript, just use an img tag where you include the link to the SVG file in the src attribute, like for any normal image.

In Inkscape, make sure that the attribute preserveAspect ratio for the picture is set to none, if you really want to distort the raster image (I see no need for this, you could just scale it in a raster editor, like gimp, to fit the box).

Also, it looks like there isn't even a need for it to be an SVG, as all your image contains is a raster image...

Why do you think you need to use SVG for this?

Hey Moini.

I understand what you are saying. I have replaced files svg files with pgn for now. However, Xav commented in my preceeding post that I should look into <preserveAspectRatio> to help my other(same) issue, which I did, and found all kinds great things could do with SVG files in websites. You know the rabbit hole. Understanding the <veiwBox> and <preserveAspectRation> seems to be a critical part of using SVG in web design. While this time it's fine if the images are raster, but I will be working on some SVG images that will be vector graphic files with raster images in them. Putting this SVG code Inline, or even large strict vector graphics files, with all that code is cumbersome to searching through just to get to the HTML that I'm looking for. For me a small amount of basic SVG Inline is fine, pages of code is not. So, I would like to have these SVG files in an image folder and call them into the HTML.

In the first two examples I shared I want the SVG images to fall within the dotted blue boundary <viewBox>. Obviously, I am not doing something right. The first two images fall below the <viewBox>. I am asking if anyone knows why.

Moini, thanks for your continued support.

Does this help?

http://tavmjong.free.fr/INKSCAPE/MANUAL ... oning.html

You don't need to set the viewbox if all you want is to use the SVG file on the web. Everything that is in the page area is in the viewbox. The page area represents the viewbox in Inkscape.

The only thing that can be problematic, when you try to distort an SVG image as you did, is embedded raster images in the SVG image. They refuse to be distorted, when preserve aspect ratio is not set to none.

You can add that attribute in the XML editor in Inkscape (see screenshot). Or you can just not distort the SVG, but put it into your website with its correct width/height ratio...

Read this: https://blog.idrsolutions.com/2013/06/s ... ect-ratio/

Ok. Everything above is correct, but I realize that I may not have been clear in my question. My main question is, if I use the <svg></svg> tag in my HTML code to set up my <viewBox> can I have a link to my svg file rather than use svg code inline. It is my understanding that I can take out things like the viewBox attributes in the actual Inkscape document. This way I set up my viewBox and adjust it's settings in the HTML rather than within the Inkscape document.

In the code of the online example I put up, http://holtstest.000webhostapp.com, the first two I tried the images are in between the <svg></svg> tags using the <object> and <image> tags, but both times the image fall belows it's intended viewBox.

I hope this make more sense, if it makes any at all.

The viewBox is sets the coordinate system that is used inside the SVG file, so it doesn't really make a lot of sense to set it from outside the SVG file. Instead you would usually just set the SVG file up so that it scales as you want it to (i.e. preserveAspectRatio), then adjust the width and height on the containing element - the <object> or <img> tag.

Additionally, CSS allows you to only show a certain portion of any image, described here, for example:
https://www.w3schools.com/css/css_image_sprites.asp