Categories
Web development

How to resize an SVG image?

Files in format .png or .jpg are easy to resize and in most cases, you do not need to use any special software to do it.
The resizing is more complicated when you want to change the size for .svg format files.

resize SVG files

What is making the .svg different from other image formats?

There can be a lot of confusion about which kind of image format to use to achieve the best result in any given situation.

In the case of .jpg and .png formats, the size of the image depends on the number of pixels. The image resolution is therefore defined by the number of pixels that defined the height and width of an image.

The .svg is a vector-based image format. SVG defines the graphics in XML format. A vector image uses geometric forms such as points, lines, curves, and shapes to represent different parts of the image as discrete objects. This is why they retain their high quality no matter how much you scale them (more about the .svg file you can read here).

How to resize a SVG image?

SVG images can be created and edited with any text editor but it is often more convenient to create SVG images with a drawing program, like Illustrator, Sketch, Inkscape, or another vector-based program.

I am using two ways to resize .svg files by using the text editor (you can use any text editor to resize your image).

Option 1:

When you will open the .svg file in the text editor it should show lines of code.

Example:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

The width and height attributes of the element define the width and height of the SVG image. So you can change the width and height to what you want.

Option 2:

If you haven’t defined the width and the height of the image in the SVG code you can adjust the size in CSS:

svg {
  width:10%;
}

Example:

Hope this helps!

Hey, here’s something that might interest you:

SVG Draw on Scroll

SVG Handwriting Animation

SVG Stroke & Fill Animation

Categories
Web development

How to create an Image Gallery with HTML and CSS?

Setting up a CSS image gallery is quite simple. Image Gallery is used to store and display the collection of pictures. Today you can learn how to create an Image Gallery with only CSS, and later tabbed an image gallery with CSS and JavaScript and on the end how to use CSS media queries to create a responsive image gallery that will look good on desktops, tablets, and smartphones. 

CSS Image Gallery

I. The following image gallery is created with CSS:

<!DOCTYPE html>
<html>
<head>
<style>
div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}
</style>
</head>
<body>

<div class="gallery">
  <a target="_blank" href="https://lenadesign.org/wp-content/uploads/2021/05/bike-animation.jpg">
    <img src="https://lenadesign.org/wp-content/uploads/2021/05/bike-animation.jpg" alt="cyclist" width="600" height="400">
  </a>
  <div class="desc">Cyclist</div>
</div>

<div class="gallery">
  <a target="_blank" href="https://lenadesign.org/wp-content/uploads/2020/03/birthday-cake.jpg">
    <img src="https://lenadesign.org/wp-content/uploads/2020/03/birthday-cake.jpg" alt="cake" width="600" height="400">
  </a>
  <div class="desc">Cake</div>
</div>

<div class="gallery">
  <a target="_blank" href="https://lenadesign.org/wp-content/uploads/2020/07/coffeeanimation.jpg">
    <img src="https://lenadesign.org/wp-content/uploads/2020/07/coffeeanimation.jpg" alt="coffee" width="600" height="400">
  </a>
  <div class="desc">Coffee</div>
</div>

</body>
</html>

Output:




II. Create a tabbed gallery:

Step 1: Add HTML

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="row">
  <div class="column">
    <img src="https://lenadesign.org/wp-content/uploads/2021/05/bike-animation.jpg" alt="cyclist" style="width:100%" onclick="myFunction(this);">
  </div>
  <div class="column">
    <img src="https://lenadesign.org/wp-content/uploads/2020/03/birthday-cake.jpg" alt="cake" style="width:100%" onclick="myFunction(this);">
  </div>
  <div class="column">
    <img src="https://lenadesign.org/wp-content/uploads/2020/07/coffeeanimation.jpg" alt="coffee" style="width:100%" onclick="myFunction(this);">
  </div>
  <div class="column">
    <img src="https://lenadesign.org/wp-content/uploads/2019/12/female-web-dev.jpg" alt="web developer" style="width:100%" onclick="myFunction(this);">
  </div>
</div>
</body>
</html>

Step 2: Add CSS

Create four columns and style the images.  

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
}

.column {
  float: left;
  width: 25%;
  padding: 10px;
}

.column img {
  opacity: 0.8;
  cursor: pointer;
}

.column img:hover {
  opacity: 1;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.container {
  position: relative;
  display: none;
}

#imgtext {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: white;
  font-size: 20px;
}

.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}

Step 3: Add JavaScript

<script>
function myFunction(imgs) {
  var expandImg = document.getElementById("expandedImg");
  var imgText = document.getElementById("imgtext");
  expandImg.src = imgs.src;
  imgText.innerHTML = imgs.alt;
  expandImg.parentElement.style.display = "block";
}
</script>

Output (Click on the image to expand it) :

cyclist
cake
coffee
web developer
×

III. Responsive Image Gallery

Step1: Add HTML:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="https://lenadesign.org/wp-content/uploads/2020/03/birthday-cake.jpg">
      <img src="https://lenadesign.org/wp-content/uploads/2020/03/birthday-cake.jpg" alt="cake" width="600" height="400">
    </a>
    <div class="desc">Cake</div>
  </div>
</div>

<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="https://lenadesign.org/wp-content/uploads/2020/07/coffeeanimation.jpg">
      <img src="https://lenadesign.org/wp-content/uploads/2020/07/coffeeanimation.jpg" alt="coffee" width="600" height="400">
    </a>
    <div class="desc">Coffee</div>
  </div>
</div>

<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="https://lenadesign.org/wp-content/uploads/2019/12/female-web-dev.jpg">
    <img src="https://lenadesign.org/wp-content/uploads/2019/12/female-web-dev.jpg" alt="web developer" width="600" height="400">
    </a>
    <div class="desc">Web developer</div>
  </div>
</div>

<div class="clearfix"></div>
</body>
</html>

Step2: Add CSS:

div.gallery {
  border: 1px solid #ccc;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

Output:

Enjoy coding!

Read also:

CSS Fixed Sidebar Menu

Units in CSS

Web Safe Fonts

Categories
HTML Web development

How to put an image into HTML code?

The HTML Image tag is the last HTML element which I would like to have a look deeper before we will go further to CSS. The image <img> tag is used to insert an image into the document. 

HTML Image

The HTML image element mustn’t contain any content and doesn’t need a closing tag. The HTML <img> tag has two required attributes: src (source) and alt (text). 

Example:

<!DOCTYPE html>
<html>
<body>

<h4>HTML Image</h4>
<img src="avatar.jpg" alt="avatar" width="640" height="480">

</body>
</html>

Output:

avatar

To link an image to another website/ HTML document, nest the <img> tag inside <a> tags. 

Attributes: 

alt (text) defines alternative text for the image. Shows when the image can not be displayed. 


height (pixels) defines the height of the image. 


src (URL) defines the source of the image. 


width (pixels) defines the width of the image. 

Enjoy coding!

Read also:

HTML Attributes

HTML Radio Buttons