How would I make an X in svg?

<svg height="300" width="300">
    <line x1="0" y1="0" x2="100" y2="150" style="stroke:#000; stroke-width:5" />
 
</svg>

For alpha/numeric characters (or even full words and sentences) in SVG you can use the <text> element:-

What if I wanted to use lines instead?

Then you would use the <line> element :rolleyes:

That’s what this is.


<svg height="300" width="300">
    <line x1="0" y1="0" x2="100" y2="150" style="stroke:#000; stroke-width:5" />
 
</svg>

Looks like you are half way there, just the other line to add.

I’m stuck.

<svg height="300" width="300">
    <line x1="0" y1="0" x2="100" y2="150" style="stroke:#000; stroke-width:5" />
 <line x1="160" y1="0" x2="100" y2="50" style="stroke:#000; stroke-width:5" />
</svg>

You do understand coordinates, don’t you?

Think about where you are placing the endpoints of the lines on the x & y axes in 2D space.
Imagine a grid if that helps, or sketch it on paper with grid lines.

5 Likes

I honestly to the best of my ability don’t understand this.

I don’t mean to be rude, but that’s basic math (OK, algebra, but still). You’re dealing with simple lines and graphs here.

A line goes from coordinates x1, y1 to x2, y2
To get a true X, you need to have perpendicular lines (lines that create a right (90 degree) angle)

If you need to, get some graph paper and map it out.

What part of this code will help me remove the line going down the middle?
M 12,26 18.5,22 18.5,14 12,10 z M 18.5,22 25,18 25,18 18.5,14 z

<svg width="300" height="300" style="background-color:red;transform: scale(.5);" viewBox="13 9.0 11 18">
    <path fill="currentColor" style="stroke: #0059dd; stroke-width:1px;color:black;" d="M 12,26 18.5,22 18.5,14 12,10 z M 18.5,22 25,18 25,18 18.5,14 z"></path>
  </svg>

Why don’t you try removing a pair of numbers at a time and seeing what the result is. Put that pair back and remove the next pair?

You’re never going to learn if you just ask people to do it for you.

I tried, I got down to a certain point where half the code was entirely gone.

And what does that have to do with making an X in svg?

1 Like

It’s this part of the code, I just found it.

18.5,22 18.5,14

Wait, or maybe it’s not, now I’m confused.

If I remove it the whole code gets messed up.

I was shared this post to help me understand coordinates.

You’re not dealing with lines there - you’re dealing with paths (and two different paths, to be exact) Just removing points won’t work - you need to rebuild the path with the precise coordinates.

1 Like

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