What are these image types?

HTML & CSS
1

#First pen →

This doesnt seems to be using any image, but they are using something like this that i do not understand:

<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">
  <symbol id="checkmark" viewBox="0 0 64 64">
     <path d="M63.003 13.372l-4.258-4.258c-1.33-1.065-3.193-1.065-4.524 0l-31.4 30.87-12.77-12.508c-1.33-1.065-3.193-1.065-4.524 0L.998 31.734c-1.33 1.065-1.33 3.193 0 4.258l19.427 18.894c1.33 1.065 3.193 1.065 4.524 0L63 17.63c1.33-1.064 1.33-2.927 0-4.258z"/>
  </symbol>
</svg>

If I delete this part from the pen then the tick doesnt work. Can some one help me to understand what is this SVG. Is this any image CSS formating?

#Second pen →

background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAz9JREFUeJzt2s1t3UYUhuFPRrSI3ESSOlxCKrE7cA1Zu4gkHaSYxGkga8OA5Y1uYAim5v7wcGbI5wHO/gzJl9wwAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOLq7JO+T/NJ7ERjNXZLfkjwm+Tcigf99G8dpRAL5fhwigbwch0g4tHPiEAmHdEkcIuFQronjNB8jEnbsljhEwq6tEYdI2KU14xAJu1IRh0jYhco4vo3k560OBGvZIg6RMKUt4xAJU+kRh0iYQs84RMLQRohDJAxppDhEwlBGjOM0/yT5qerg0DJyHCKhqxniEAldzBSHSNjUjHGIhE3MHMdp/k7yeu0LA3uI4zHJ27UvDIgDFogDFogDFogDFogDFogDFogDFogDFogDFoiDUg9J3vRe4krioNRDkr+SfErya+ddLiUOSp3iON2omSIRB6WexzFTJOKg1FIcM0QiDkq14hg5EnFQ6tw4RoxEHJS6NI6RIhEHpa6NY4RIxEGpW+PoGYk4KLVWHD0iEQel1o5jy0jEQamqOLaIRByUqo6jMhJxUGqrOCoiEQelto5jzUjEQalecawRiTgo1TuOWyIRB6VGieOaSMRBqdHiuCQScVBq1DjOiUQclBo9jpciEQelZonje5GIg1KzxfE8EnFQ5sfMGcdpvgywgzgKvOq9wJPPSf7rvcQN7novcKN3ST70XoKX/ZDk9/R/kx5tfDkmIhJx0CAScdAgEnHQIBJx0CAScdAgEnHQIBJx0CAScdAgEnHQIBJx0HAfkYiDF4lEHDSIRBw0iEQcNBw9EnHQdNRIxMHZjhaJOLjYUSIRB1fbeyTi4GZ7jUQcrGZvkYiD1e0lEnFQ5j7JH+n/kIuDYc0aiTjYzGyRiIPNzRKJOOhm9EjEQXejRiIOhjFaJOJgOKNEIg6G1TsScTC8XpGIg2lsHYk4mM5WkYiDad0n+TPigEVVkYiD3Vg7EnGwO2tFIg5269ZIxMHuXRuJODiMSyMRB4dzbiTi4LBakYiDw1uKRBzw5Hkk4oBnTv9uiQMW3PVeAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIDj+QqWjjdBdpLuwAAAAABJRU5ErkJggg==) no-repeat;

while I understand that this one is using some image, but I could not understand where is this image actually hosted?

2

The first example is an SVG image, the second is a data URI image.

1 Like
3

while I understand that this one is using some image, but I could not understand where is this image actually hosted?

4

image/png;base64,iVBORw0KG...ggg== IS the image. So it’s effectively hosted in your CSS file.

5

This might be helpful:

3 Likes
6

svg is essentially an illustration/image creation through CSS?

7

There are a lot of articles around on SVG images.

This is a good start.

4 Likes
8

No, SVG is not CSS. It is an XML-like language for creating Scalable Vector Graphics. But you can apply css to the svg elements in just the same was as you do with html elements.

1 Like
9

Now I realizing after reading this that why when we export our work in photoshop/illustrator then its says raterizing images. so basically svg is a coding way of creating images in html files.

10

The advantage of svg over rasterised images is their scalability. Because they are not made up of a mosaic of pixels, bit lines rendered between coordinates, they never pixelate when blown up to any size and will always look crisp on retina screens. Also the data size is usually much smaller. And as I mentioned, you can apply css to them, so you can use that to change colours in the graphic etc.

With Illustrator, you can export a graphic as svg. It can be easier to create graphics in such a program rather than coding it.

2 Likes
11

fontawesome icons are also a kind of svg type?[quote=“SamA74, post:10, topic:283815”]
With Illustrator, you can export a graphic as svg. It can be easier to create graphics in such a program rather than coding it.
[/quote]

those graphics can be animated like gif images?

12

I don’t know, I’ve never used fontawsome.

SVG can be animated.

1 Like
13

I read on that Mozilla page that since SVG is in code format that search engines can read, thus the SEO advantage.

when we make SVG’s thorough illustrator instead of directly writing code into the HTML then that advantage is preserved or lost?

14

SVG is the same code/language regardless of where you create it.
What Illustrator exports is a file, if you open that file in your code editor you will see the svg elements in xml. That file can be referenced like an ordinary image <img src="logo.svg" alt="My Logo"> or the code can be copy/pasted into your html <svg>

1 Like
15

Thanks doubt cleared.

16

In the below mentioned code pen →

svg { 
  width: 1.5em;
  height: 1.5em;
  position: absolute;
  left: -.5em; 
  top: -0.25em;
  border: 5px solid #000;
}

direcly svg is styled just like style p. when more than one sv’s are used then it might become complicated.

can we use class?

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="M13 50.986L37.334 75 88 25" stroke-width="6" stroke="#66bb6a" fill="none" fill-rule="evenodd" stroke-dasharray="150" stroke-dashoffset="150"/></svg>

can we insert a class in this?

17

Yes, :+1: exactly like html. You can apply a class to the <svg> or any of its sub-elements.

1 Like
18

Nice.:slight_smile:

19

can svg be put under the input

<input type="submit" name="submit" value="Buy now">

svg path →

<img src="img/somevector.svg" alt="">

20

Try this:

png svg.zip (3.2 KB)

1 Like