0

Is it possible to convert the svg image to text? I have bought one of the Bootstrap templates.

In the navigation bar, when scrolling down, the text changes from white to black. I would like it to be the same with my logo. Can I change my logo to text? if so how to do it?

enter image description here

*if I have a logo and if it is white, after moving down, it is not visible.

halfer
  • 19,824
  • 17
  • 99
  • 186
Maddie Graham
  • 2,019
  • 4
  • 25
  • 51
  • You cannot change SVG to text my friend, but what you can do is change the fill color of the SVG element to achieve similar results. Read https://stackoverflow.com/questions/9529300/can-i-change-the-fill-color-of-an-svg-path-with-css – Prakhar Thakur Mar 19 '19 at 09:52

1 Answers1

1

If you want to change the image from black to white or vice versa you can use css filter property with its invert() function

body {
  font: 13px Verdana;
  
}

.div {
  display: flex;
  align-items: center;
  padding: 10px;
}

.before {
  background: red;
  color: white;
}

img {
  margin-left: 30px;
}

.before img {
  filter: invert(1)
}

.after {
  border: 1px solid red
}
Before Scroll
<div class="div before">
  <h2>Boomerange</h2>
  <img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/vote.svg" width="100">
</div>
<br><br> After Scroll
<div class="div after">
  <h2>Boomerange</h2>
  <img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/vote.svg" width="100">
</div>
Bhuwan
  • 16,525
  • 5
  • 34
  • 57
  • Thank you for your answer. In this situation, I have two logos, but how to change them? What does the code look like when scroll down, select the correct one? – Maddie Graham Mar 19 '19 at 11:49
  • @MaddieGraham The way text is changing from white to black, change the logo class and use filter. I am sure you have your scrolling function inside your javascript file. – Bhuwan Mar 19 '19 at 12:13