Changing SVG color

From https://groups.google.com/forum/?fromgroups#!topic/mathjax-users/yi120XpJ9Ng

MathJax supports the \color tag in text such as \color{red}{eq} but I can't get \color{rgb}{1.0,0.4,0.4} to work. I want to very dark grey. My html color is #333333 and the completely black just stick out as different. Any way to use this color with MathJax?

---

problem solved, sorry. I was using svg output and changed to HTMLorMML, which uses the same color as the html text...

---

As you have found out, the HTML-CSS output will inherit the font color if the surrounding text. But the SVG output is not font-based, but path-based, and SVG paths don't use the color CSS property. You could set the default color for SVG output using

.MathJax_SVG svg > g,
.MathJax_SVG_Display svg > g {
  fill: #333,
  stroke: #333
}

for example.

Your \color{rgb}{1.0,0.4,0.4} is incorrect syntax. I think you may mean to use \DefineColor, but that also requires a new color name, and doesn't set the current color (you would need to use \color with the new color name to do that). Finally, note that to use \DefineColor you need to load the color extension by including

  TeX: { extensions: ["color.js"] }

in your configuration. See the color extension documentation for details.

Davide

---

Hi Davide,

I'm having a hard time figuring out how to change the default SVG color output.

You could set the defaultcolorforSVGoutput using

.MathJax_SVG svg > g, 
.MathJax_SVG_Display svg > g { 
  fill: #333, 
  stroke: #333 
} 

for example.

Where in particular would this be set?

Thanks

---

The

.MathJax_SVG svg > g, 
.MathJax_SVG_Display svg > g { 
  fill: #333; 
  stroke: #333 
}

is a CSS declaration, so you could include it in your page's CSS file. (Note, however, that I originally had a comma where there needs to be a semicolon. I have corrected that in the code above).

Alternatively you can make it part of your MathJax configuration using something like

<script type="text/x-mathjax-config"> 
MathJax.Hub.Config({ 
  styles: { 
    ".MathJax_SVG svg > g, .MathJax_SVG_Display svg > g":  { 
      fill: "#333", 
      stroke: "#333" 
    } 
  } 
}); 
</script>

placed in your page before the script that loads MathJax.js.

Davide