#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?
Gandalf
December 13, 2017, 1:01pm
2
The first example is an SVG image, the second is a data URI image.
1 Like
the second is a data URI image.
while I understand that this one is using some image, but I could not understand where is this image actually hosted?
Gandalf
December 13, 2017, 3:41pm
4
image/png;base64,iVBORw0KG...ggg==
IS the image. So it’s effectively hosted in your CSS file.
svg is essentially an illustration/image creation through CSS?
There are a lot of articles around on SVG images.
This is a good start.
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...
4 Likes
SamA74
December 13, 2017, 6:33pm
8
No, SVG is not CSS. It is an XML-like language for creating S calable V ector G raphics. But you can apply css to the svg elements in just the same was as you do with html elements.
1 Like
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.
SamA74
December 13, 2017, 6:56pm
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
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?
SamA74
December 13, 2017, 7:06pm
12
I don’t know, I’ve never used fontawsome.
SVG can be animated.
Animation of Scalable Vector Graphics, an open XML-based standard vector graphics format is possible through various means:
Libraries have also been written as a shim to give current SVG-enabled browsers SMIL support. This method is also known as SVG+Time.[citation needed]
Because SVG supports Portable Network Graphics (PNG) and JPEG raster images, it can be used to animate such images as an alternative to APNG and Multiple-image Network Graphics (MNG).
1 Like
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?
SamA74
December 13, 2017, 7:30pm
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
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?
SamA74
December 13, 2017, 8:23pm
17
codeispoetry:
can we use class?
Yes, exactly like html. You can apply a class to the <svg>
or any of its sub-elements.
1 Like
can svg be put under the input
<input type="submit" name="submit" value="Buy now">
svg path →
<img src="img/somevector.svg" alt="">