SVG code as an arrow

HTML & CSS
1

I try to set a programming code like:

content: url('data:image/svg+xml;utf8,<svg class="svgarrow1" version="1.1"

Which code is valid for SVG as a programming code?

SVG_code

2

I’d have a look at that, and suggest you’re trying to draw a polygon.

2 Likes
3

Hi there toplisek,

why not just use the arrow.svg file. :rolleyes:

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled document</title>

<!--
The internal CSS should be transferred to an external file
<link rel="stylesheet" href="screen.css" media="screen">
-->

<style media="screen">
body {
    background-color: #f0f0f0;
    font: normal 1em / 1.62em  sans-serif;
 }
div {
	display: flex;
	align-items: center;
	padding: 0.25em;
	border: 1px solid #999;
	background-color: #fff; 
 }
div::before{
    width: 9em;
    height: 2em;
    content: url( arrow.svg );
 }  
</style>

</head>
<body>

<div>This is an svg file</div>

</body>
</html>

arrow.svg file:-

<svg  
   xmlns="http://www.w3.org/2000/svg" 
   viewBox="0 0 144 32">
   <polygon points="0,0 128,0 144,16 128,32 0,32 0,0" fill="#017f01"/>
</svg>

coothead

4

Thank your for the message. As I understand SVG file can not modified in color using CSS and you need to add into CSS:

content: url('data:image/svg+xml;utf8,<svg class="svgarrow1" version="1.1"
5

As far as I know you can only modify the svg with css when its been inlined in the html. When you use svg as an img tag or background image (or data image) then you can’t change any of the properties in the svg.

1 Like
6

@PaulOB is correct. :winky:

So, do it like this instead…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled document</title>

<!--
The internal CSS should be transferred to an external file
<link rel="stylesheet" href="screen.css" media="screen">
-->

<style media="screen">
body {
    background-color: #f0f0f0;
    font: normal 1em / 1.5em BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }
svg {
    width: 9em;
    fill: #017f01;  
    transition: 0.5s ease-in-out;
    cursor: pointer;
  }
 div {
	display: flex;
	align-items: center;
	padding: 0.25em;
	border: 1px solid #999;
	background-color: #fff; 
 }
svg:hover,
svg:active {
    fill:#f00; 	
 }
</style>

</head>
<body>

<h1>hover the arrow</h1>

<div>
 <svg  
    xmlns="http://www.w3.org/2000/svg" 
    viewBox="0 0 144 32">
    <polygon points="0,0 128,0 144,16 128,32 0,32 0,0"/>
 </svg>
 &#8592; This is a svg
</div>

</body>
</html>

coothead

1 Like
7

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