OTHER EMBEDDING TECHNOLOGIES ON THE WEB, VECTOR GRAPHICS

HMTL Nov 30, 2022 0 357 Add to Reading List

OTHER EMBEDDING TECHNOLOGIES ON THE WEB, VECTOR GRAPHICS

At this point, you should be very used to embedding media elements into your web pages, including images, video and audio. Let us look at some elements that allow you to embed a wide variety of content types into your web pages. The <iframe> <embed> and <object> elements <iframe> are for embedding other web pages, and the other two allow you to embed external resources such as PDF files.

HISTORY OF EMBEDDING

A long time ago on the Web, it was popular to use frames to create websites — small parts of a website stored in individual HTML pages. These were embedded in a master document called a frameset, which allowed you to specify the area on the screen that each frame filled, rather like sizing the columns and rows of a table. These were considered the height of coolness in the mid to late 90s, and there was evidence that having a webpage split up into smaller chunks like this was better for download speeds — especially noticeable with network connections being so slow back then. They did however have many problems, which far outweighed any positives as network speeds got faster, so you don't see them being used anymore.

Finally, the <iframe> element appeared (along with other ways of embedding content, such as <canvas>, <video>, etc.) This provides a way to embed an entire web document inside another one, as if it were an <img> or other such element, and is used regularly today.

IFRAMES IN DETAIL

There are some serious Security concerns to consider with <iframe>s, as we'll discuss below, but this doesn't mean that you shouldn't use them in your websites. it just requires some knowledge and careful thinking. We will explore the code in a bit more detail. imagine you wanted to include the MDN glossary on one of your web pages you could try something like this:

<head>
  <style>
    iframe {
      border: none;
    }
  </style>
</head>
<body>
  <iframe
    src="https://developer.mozilla.org/en-US/docs/Glossary"
    width="100%"
    height="500"
    allowfullscreen
    sandbox>
   <p>
      <a href="/en-US/docs/Glossary">
        Fallback link for browsers that don't support iframes
      </a>
    </p>
  </iframe>
</body>

This particular example includes the basic examples needed to use an <iframe>:

Border: none When used, the <iframe> is displayed without a surrounding border. Otherwise, by default, browsers display the <iframe> with a surrounding border which is generally not the best choice for most use cases.

Allowfullscreen: If set, the <iframe> is able to be placed in fullscreen mode using the Fullscreen API, this is beyond the scope of this article.

Src: This attribute, as with <video>/<img>, contains a path pointing to the URL of the document to be embedded. It is usually one of the most important elements as it bears the destination.

Width and Height: These specify the width and height of the iframe you want to be. It is a very important part of formatting and organization in <iframes>.

Fallback content: In the same way as other similar elements like <video>, you can include fallback content between the opening and closing <iframe></iframe> tags that will appear if the browser doesn't support the <iframe>. In this case, we have included a link to the page instead. It is unlikely that you'll come across any browser that doesn't support <iframe>s these days.

Sandbox: This attribute, which works in slightly more modern browsers than the rest of the <iframe> features (e.g. IE 10 and above) requests heightened security settings; we'll say more about this in the next section.

NOTE: To improve speeds, it is a good idea to set the iframes src attribute with javaScript after the main content is done with loading. This makes your page faster and decreases load time on the web.

Security Concerns

Above we mentioned security concerns — let's go into this in a bit more detail now. We are not expecting you to understand all of this content perfectly the first time; we just want to make you aware of this concern, and provide a reference to come back to as you get more experienced and start considering using <iframe>s in your experiments and work. Also, there is no need to be scared and not use <iframe>s — you just need to be careful.

Only Embed when Necessary

Sometimes it makes sense to embed third-party content — like youtube videos and maps — but you can save yourself a lot of headaches if you only embed third-party content when completely necessary. A good rule for web security is "You can never be too cautious. If you made it, double-check it anyway. If someone else made it, assume it's dangerous until proven otherwise."

Besides security, you should also be aware of intellectual property issues. Most content is copyrighted, offline and online, even content you might not expect (for example, most images on Wikimedia Commons). Never display content on your webpage unless you own it or the owners have given you written, unequivocal permission. Penalties for copyright infringement are severe. Again, you can never be too cautious.

Use HTTPS

HTTPS is the enabled version of HTTP. You should serve your websites using HTTPS whenever possible:

HTTPS reduces the chance that remote content has been tampered with in a transit.
HTTPS prevents embedded content from accessing content in your parent document and vice versa.

ADDING VECTOR GRAPHICS TO WEB

Vector graphics are very useful in many circumstances — they have small file sizes and are highly scalable, so they don't pixelate when zoomed in or blown up to a large size. In this article we'll show you how to include one in your webpage.They are very important

WHAT ARE VECTOR GRAPHICS

On the internet, you will wok with two kinds of images , raster images and vector images:

Raster Images:are defined using a grid of pixels — a raster image file contains information showing exactly where each pixel is to be placed, and exactly what color it should be. Popular web raster formats include Bitmap (.bmp), PNG (.png), JPEG (.jpg), and GIF (.gif.)

Vector Images: are defined using algorithms — a vector image file contains shape and path definitions that the computer can use to work out what the image should look like when rendered on the screen. The SVG format allows us to create powerful vector graphics for use on the Web.

The difference becomes apparent when you zoom in the page — the PNG image becomes pixelated as you zoom in because it contains information on where each pixel should be (and what color). When it is zoomed, each pixel is increased in size to fill multiple pixels on screen, so the image starts to look blocky. The vector image however continues to look nice and crisp, because no matter what size it is, the algorithms are used to work out the shapes in the image, with the values being scaled as it gets bigger.

WHAT IS SVG

SVG stands for scalable vector graphics, it is an XML-based language for describing vector images. It's basically markup, like HTML, except that you've got many different elements for defining the shapes you want to appear in your image, and the effects you want to apply to those shapes. SVG is for marking up graphics, not content. At the simplest end of the spectrum, you've got elements for creating simple shapes, like <circle> and <rect>. More advanced SVG features include <feColorMatrix> (transform colors using a transformation matrix,) <animate> (animate parts of your vector graphic,) and <mask> (apply a mask over the top of your image.)

<svg
  version="1.1"
  baseProfile="full"
  width="300"
  height="200"
  xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="black" />
  <circle cx="150" cy="100" r="90" fill="blue" />
</svg>

SVG are very easy to use in a way! You can write simple SVG in a text editor, but for a complex image this quickly starts to get very difficult and you may encounter our problem.

For creating SVG images, most people use a vector graphics editor like Inkscape or Illustrator. These packages allow you to create a variety of illustrations using various graphics tools, and create approximations of photos (for example Inkscape's Trace Bitmap feature.)

SVG has some additional advantages besides those described so far:

Text in vector images remains accessible (which also benefits your SEO).
SVGs lend themselves well to styling/scripting, because each component of the image is an element that can be styled via CSS or scripted via JavaScript.
SVG can also take her out take significance, make yourself useful.

ADDING SVG TO YOUR PAGES

In this section we'll go through the different ways in which you can add SVG vector graphics to your web pages.

The img element:

To embed an SVG via an <img> element, you just need to reference it in the src attribute as you'd expect. You will need a height or a width attribute (or both if your SVG has no inherent aspect ratio). If you have not already done so, please read Images in HTML.

<img
  src="equilateral.svg"
  alt="triangle with all three sides equal"
  height="87"
  width="100" />

Advantages

Quick, familiar image syntax with built-in text equivalent available in the alt attribute.
You can make the image into a hyperlink easily by nesting the <img> inside an <a> element.
The SVG file can be cached by the browser, resulting in faster loading times for any page that uses the image loaded in the future.

Disadvantages

You cannot manipulate the image with JavaScript.
If you want to control the SVG content with CSS, you must include inline CSS styles in your SVG code. (External stylesheets invoked from the SVG file take no effect.)

TROUBLESHOOTING AND BROWSER SUPPORT

For browsers that don't support SVG (IE 8 and below, Android 2.3 and below), you could reference a PNG or JPG from your src attribute and use a srcset attribute (which only recent browsers recognize) to reference the SVG. This being the case, only supporting browsers will load the SVG — older browsers will load the PNG instead:

<img
  src="equilateral.png"
  alt="triangle with equal sides"
  srcset="equilateral.svg" />

You can also use SVGs as CSS background images, as shown below. In the below code, older browsers will stick with the PNG that they understand, while newer browsers will load the SVG:

background: url("fallback.png") no-repeat center;

background-image: url("image.svg");

background-size: contain;

Like the <img> method described above, inserting SVGs using CSS background images means that the SVG can't be manipulated with JavaScript, and is also subject to the same CSS limitations.

HOW TO INCLUDE SVG CODE IN YOUR HTML

You can also open up the SVG file in a text editor, copy the SVG code, and paste it into your HTML document, this is called putting your SVG inline, or inlining SVG. Make sure your SVG code snippet begins with an <svg> start tag and ends with an </svg> end tag. Here's a very simple example of what you might paste into your document:

<svg width="300" height="200">
  <rect width="100%" height="100%" fill="green" />
</svg>

There are alot of free online resources for SVG which can enable you embed them easily into your code like “https://undraw.co/illustrations”

Advantages

Putting your SVG inline saves an HTTP request, and therefore can reduce a bit your loading time.
You can assign classes and ids to SVG elements and style them with CSS, either within the SVG or wherever you put the CSS style rules for your HTML document. In fact, you can use any SVG presentation attribute as a CSS property.
Inlining SVG is the only approach that lets you use CSS interactions (like :focus) and CSS animations on your SVG image (even in your regular stylesheet.)
You can make SVG markup into a hyperlink by wrapping it in an <a> element.

SUMMARY

This article has provided you with a quick tour of what vector graphics and SVG are, why they are useful to know about, and how to include SVG inside your webpages. It was never intended to be a full guide to learning SVG, just a pointer so you know what SVG is if you meet it in your travels around the Web. So don't worry if you don't feel like you are an SVG expert yet. We've included some links below that might help you if you wish to go and find out more about how it works.