SVG as programming code or raw source

HTML & CSS
1

I have seen an example of programming code like:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 138 26" fill="none" stroke="#000" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round">
  <path d="M80 6h-9v14h9 M114 6h-9 v14h9 M111 13h-6 M77 13h-6 M122 20V6l11 14V6 M22 16.7L33 24l11-7.3V9.3L33 2L22 9.3V16.7z M44 16.7L33 9.3l-11 7.4 M22 9.3l11 7.3 l11-7.3 M33 2v7.3 M33 16.7V24 M88 14h6c2.2 0 4-1.8 4-4s-1.8-4-4-4h-6v14 M15 8c-1.3-1.3-3-2-5-2c-4 0-7 3-7 7s3 7 7 7 c2 0 3.7-0.8 5-2 M64 13c0 4-3 7-7 7h-5V6h5C61 6 64 9 64 13z"/>
</svg>


body {
  text-align: center;
  padding: 3rem;
  height: 70px;
  width: 270px;
}

If I put the height and width it will resize according to my measures, but if I have a raw file (SVG), it will not work. Is is possible to resize pure raw file (SVG) or only programming code can resize such objects?

Source code: https://blog.codepen.io/documentation/logos/

I’m new to SVG. If I understand SVG file is also a vector file.

2

well a PDF is not a ‘raw file’. Just to make that clear.
The SVG scales because it’s got a set viewBox.

Setting the height and width of an SVG element defines the screen coordinates that the SVG element occupies.

The viewbox then says “the upper left corner of my element is relative-coordinate x,y, the relative-width of my canvas is w, and the relative-height of my canvas is h.” It then takes the instructions given inside the SVG (that ‘path’ element), and draws the lines based upon the relative coordinates within that element.

Consider: If I tell my SVG element it is 200x200, and is on the screen at 10,10, and it’s viewbox is 0,0,100,100.
Then if i draw a line from 0,0 to 0,10 in my SVG path, what it ACTUALLY draws on screen is a line from 10,10 to 10,30 on the screen - but I don’t need to know anything about the screen to know how to draw my line. The browser takes care of the relative-to-absolute conversion for me.

If your ‘raw’ SVG file contains the same definitions, you will get the same scaling picture.

3 Likes
3

I’m testing:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 138 26" fill="none" stroke="#000" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round">

viewBox=“0 0 270 70”
The relative-width of my canvas is w: 270
The relative-height of my canvas is h: 70

Your quotation:
The viewbox then says “the upper left corner of my element is relative-coordinate x,y, the relative-width of my canvas is w, and the relative-height of my canvas is h.”

Can be logo resized to 270x70 px if I understand according to the relative coordinates within that element?

270x70px
270x70px1000×575 30.7 KB

4

Just set the size to 270 x 70 with the width and height attributes or via css.

e.g.

<svg xmlns="http://www.w3.org/2000/svg" width="270" height="70" viewBox="0 0 138 28"  fill="none" stroke="#000" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round">
  <path d="M80 6h-9v14h9 M114 6h-9 v14h9 M111 13h-6 M77 13h-6 M122 20V6l11 14V6 M22 16.7L33 24l11-7.3V9.3L33 2L22 9.3V16.7z M44 16.7L33 9.3l-11 7.4 M22 9.3l11 7.3 l11-7.3 M33 2v7.3 M33 16.7V24 M88 14h6c2.2 0 4-1.8 4-4s-1.8-4-4-4h-6v14 M15 8c-1.3-1.3-3-2-5-2c-4 0-7 3-7 7s3 7 7 7 c2 0 3.7-0.8 5-2 M64 13c0 4-3 7-7 7h-5V6h5C61 6 64 9 64 13z"/>
</svg>

or:

svg{width:270px;height;70px}

The width and height create the viewport of the svg and the viewbox sets the position and zoom/pan of the svg.

Not sure if that’s what you meant though :slight_smile:

5

If your viewbox is 270x70, and your SVG is 270x70, there is no resizing going on; the relative coordinates translate directly to the absolute cordinates on a 1:1 scale.

1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.