- SVG Layout Creation

AL KHOORY SOLUTIONS

- SVG Layout Creation

To meet the requirements of the Security Industry Regulatory Agency (SIRA), we create Scalable Vector Graphics (SVG) drawings and layouts for buildings. Every floor must have its own set of drawings, with details of the CCTV system marked on each floor. SVG drawings or layouts are required for all commercial buildings in Dubai, as per SIRA's requirement for the VideoGuard device, to comply with SIRA law.

SVG is a coding-based drawing format. And that code has to go somewhere. Your SVG is included within a document or file on your computers and tablets. In the future, one can start using an existing file made in a graphical design application or obtained from a clip-art library while experimenting with sophisticated approaches. However, in this chapter, we'll start from the beginning, with a blank file.

What makes SVG unique?

Traditional image formats like JPEG, PNG, and GIF are based on bitmap (or raster-based), which means they have a fixed number of pixels. This usually implies that when you start increasing or decreasing the image size of this sort, you'll see jagged lines, hazy artefacts, and a fragmented mess.

We also have WebP, a more contemporary picture format developed by Google with the goal of replacing the JPEG, PNG, and GIF file formats with a single, more versatile solution.

CSS may be used to style an SVG

That's correct. This means you don't need to find your way around every design tools to make a little adjustment like changing the colour. In fact, if you've done any kind of web-design or front-end programming, adding a gradation to a shape or changing the width of a stroke should be a breeze.

Friendly to SEO

SVGs are XML-based, as I said at the beginning of this piece, which means that tags, description, and links may be included, making the material more recognised for Google search and boosting general accessibility. Only the "title" and "alt" elements are available for SEO with bitmap-based pictures.

HTML Allows SVGs to be embedded

SVGs, unlike other image formats that must be downloaded as an objective source from the server, may be integrated directly into HTML code. So, why is this beneficial?

It means they can be researched and indexed, making them more accessible. You may also use CSS to change the SVG's appearance. Also, if you cache your HTML pages, the integrated SVGs will be cached as well. Contact us for SVG layout creation!

Animation

SVGs really shine in this area. Possessing the option to edit SVGs straight with a word processor implies they can be brought to life, making it extremely easy to infuse some interactive elements into your site. You can make these animations as simple or even as complex as you want. SVGs, like HTML, are depicted by the D.O.M (document object model), which means they can be manipulated using JavaScript as well.