Tag: #image

How to resize an SVG image?

Post author By Lena Stanley
Post date March 26, 2021

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.

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

Tags #image, resize, svg

CSS Web development

How to create an Image Gallery with HTML and CSS?

Post author By Lena Stanley
Post date December 24, 2019

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.

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:

Cyclist

Cake

Coffee

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) :

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:

Cyclist

Cake

Coffee

Web dev

Enjoy coding!

How to put an image into HTML code?

Post author By Lena Stanley
Post date December 23, 2019

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.

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:

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!