CODEWITHSUNDEEP
htmlcsssvg
jcubic
jcubic

Reputation: 66620

Change font size of the html inside svg

I want to insert html (syntax highlighted code) into svg. The problem is that fonts are gigantic and line heigh is also way bigger then it should.

svg foreignobject figure {
    width: 100%;
    height: 100%;
    margin: 0;
}
/* ========================================================================== */
/* Syntax highlighting styles */
/* ========================================================================== */
.highlight .p {  }
.highlight { background: #152032; color: #e9e9e8; padding: 2px 10px; overflow: auto; font-family: monospace; }
.highlight .c { color: #999988; font-style: italic } /* Comment */
.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
.highlight .k { font-weight: bold } /* Keyword */
.highlight .o { font-weight: bold } /* Operator */
.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */
.highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */
.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */
.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
.highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .gr { color: #aa0000 } /* Generic.Error */
.highlight .gh { color: #999999 } /* Generic.Heading */
.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
.highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */
.highlight .go { color: #888888 } /* Generic.Output */
.highlight .gp { color: #555555 } /* Generic.Prompt */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #aaaaaa } /* Generic.Subheading */
.highlight .gt { color: #aa0000 } /* Generic.Traceback */
.highlight .kc { font-weight: bold } /* Keyword.Constant */
.highlight .kd { color: #20A8E4; } /* Keyword.Declaration */
.highlight .kp { font-weight: bold } /* Keyword.Pseudo */
.highlight .kr { font-weight: bold } /* Keyword.Reserved */
.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */
.highlight .m { color: #009999 } /* Literal.Number */
.highlight .s { color: #d14 } /* Literal.String */
.highlight .na { color: #008080 } /* Name.Attribute */
.highlight .nb { color: #0086B3 } /* Name.Builtin */
.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */
.highlight .no { color: #008080 } /* Name.Constant */
.highlight .ni { color: #800080 } /* Name.Entity */
.highlight .ne { color: #ff4242; font-weight: bold } /* Name.Exception */
.highlight .nf { color: #d63535; font-weight: bold } /* Name.Function */
.highlight .nn { color: #b393ff; } /* Name.Namespace */
.highlight .nt { color: #d47329 } /* Name.Tag */
.highlight .nv { color: #008080 } /* Name.Variable */
.highlight .ow { font-weight: bold } /* Operator.Word */
.highlight .w { color: #bbbbbb } /* Text.Whitespace */
.highlight .mf { color: #009999 } /* Literal.Number.Float */
.highlight .mh { color: #009999 } /* Literal.Number.Hex */
.highlight .mi { color: #0DF1D1; } /* Literal.Number.Integer */
.highlight .mo { color: #009999 } /* Literal.Number.Oct */
.highlight .sb { color: #d14 } /* Literal.String.Backtick */
.highlight .sc { color: #d14 } /* Literal.String.Char */
.highlight .sd { color: #d14 } /* Literal.String.Doc */
.highlight .s2 { color: #FF8D00 } /* Literal.String.Double */
.highlight .se { color: #d14 } /* Literal.String.Escape */
.highlight .sh { color: #d14 } /* Literal.String.Heredoc */
.highlight .si { color: #d14 } /* Literal.String.Interpol */
.highlight .sx { color: #d14 } /* Literal.String.Other */
.highlight .sr { color: #009926 } /* Literal.String.Regex */
.highlight .s1 { color: #FF8D00 } /* Literal.String.Single */
.highlight .ss { color: #990073 } /* Literal.String.Symbol */
.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */
.highlight .vc { color: #008080 } /* Name.Variable.Class */
.highlight .vg { color: #008080 } /* Name.Variable.Global */
.highlight .vi { color: #008080 } /* Name.Variable.Instance */
.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */

/* fix for error incss variables */
.highlight .err, .highlight .err + .k {
    background: transparent;
    color: #e9e9e8;
    font-weight: normal;
}
<svg viewBox="0 0 100 100"
     preserveAspectRatio="xMinYMin meet"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:xhtml="http://www.w3.org/1999/xhtml">
    <radialGradient id="rg">
      <stop offset="0" stop-color="black"/>
      <stop offset="1" stop-color="white"/>
    </radialGradient>
    <mask id="myMask">
        <rect x="0" y="0" width="100" height="100" fill="white"/>
        <circle cx="50" cy="50" r="45" fill="url(#rg)"/>
    </mask>
    <foreignobject class="wow-star__text" width="100%" height="100%">
        <body xmlns="http://www.w3.org/1999/xhtml">
            <figure class="highlight">
                <pre><code class="language-php" data-lang="php"><span class="c1">// -----------------------------------------------------------------------------</span>
<span class="c1">// :: class that send messages using Server-sent events</span>
<span class="c1">// -----------------------------------------------------------------------------</span>
<span class="k">class</span> <span class="nc">EventStream</span> <span class="p">{</span>
    <span class="k">function</span> <span class="fm">__construct</span><span class="p">(</span><span class="nv">$name</span><span class="p">)</span> <span class="p">{</span>
        <span class="nb">ob_start</span><span class="p">();</span>
        <span class="nv">$this</span><span class="o">-&gt;</span><span class="na">name</span> <span class="o">=</span> <span class="nv">$name</span><span class="p">;</span>
        <span class="nv">$this</span><span class="o">-&gt;</span><span class="na">id</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
        <span class="nv">$this</span><span class="o">-&gt;</span><span class="na">setup</span><span class="p">();</span>
        <span class="cm">/* start fresh */</span>
        <span class="nb">ob_end_clean</span><span class="p">();</span>
    <span class="p">}</span>
    <span class="c1">// -------------------------------------------------------------------------</span>
    <span class="c1">// :: send Server-sent event</span>
    <span class="c1">// -------------------------------------------------------------------------</span>
    <span class="k">function</span> <span class="nf">send</span><span class="p">(</span><span class="nv">$data</span><span class="p">)</span> <span class="p">{</span>
        <span class="nv">$data</span> <span class="o">=</span> <span class="nb">json_encode</span><span class="p">(</span><span class="nv">$data</span><span class="p">);</span>
        <span class="k">echo</span> <span class="s2">"event: </span><span class="si">{</span><span class="nv">$this</span><span class="o">-&gt;</span><span class="na">name</span><span class="si">}</span><span class="se">\r\n</span><span class="s2">id: </span><span class="si">{</span><span class="nv">$this</span><span class="o">-&gt;</span><span class="na">id</span><span class="si">}</span><span class="se">\r\n</span><span class="s2">data: </span><span class="si">$data\r\n\r\n</span><span class="s2">"</span><span class="p">;</span>
        <span class="nv">$this</span><span class="o">-&gt;</span><span class="na">id</span><span class="o">++</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="c1">// -------------------------------------------------------------------------</span>
    <span class="c1">// :: function that will make php file stream data it will disable any</span>
    <span class="c1">// :: buffering that may be added by apache, php or nginx proxy</span>
    <span class="c1">// :: ref: tinyurl.com/y8yyr6eq (https://www.jeffgeerling.com/blog)</span>
    <span class="c1">// -------------------------------------------------------------------------</span>
    <span class="k">private</span> <span class="k">function</span> <span class="nf">setup</span><span class="p">()</span> <span class="p">{</span>
        <span class="o">@</span><span class="nb">ini_set</span><span class="p">(</span><span class="s1">'zlib.output_compression'</span><span class="p">,</span><span class="mi">0</span><span class="p">);</span>
        <span class="o">@</span><span class="nb">ini_set</span><span class="p">(</span><span class="s1">'implicit_flush'</span><span class="p">,</span><span class="mi">1</span><span class="p">);</span>
        <span class="o">@</span><span class="nb">ob_end_clean</span><span class="p">();</span>
        <span class="nb">set_time_limit</span><span class="p">(</span><span class="mi">0</span><span class="p">);</span>
        <span class="nb">header</span><span class="p">(</span><span class="s1">'Content-type: text/event-stream; charset=utf-8'</span><span class="p">);</span>
        <span class="nb">header</span><span class="p">(</span><span class="s2">"Cache-Control: no-cache, must-revalidate"</span><span class="p">);</span>
        <span class="c1">// Setting this header instructs Nginx to disable fastcgi_buffering</span>
        <span class="c1">// and disable</span>
        <span class="c1">// gzip for this request.</span>
        <span class="nb">header</span><span class="p">(</span><span class="s1">'X-Accel-Buffering: no'</span><span class="p">);</span>
    <span class="p">}</span>
<span class="p">}</span></code></pre>
            </figure>
        </body>
    </foreignobject>
</svg>

The font is even bigger on Codepen: https://codepen.io/jcubic/pen/VwwzVXO?editors=1100

Why this happen and how to make the font normal?

Upvotes: 0

Views: 184

Answers (1)

jcubic
jcubic

Reputation: 66620

The problem of big font was viewBox it was 100 100 so it scale the whole svg to fit the page, setting viewBox="0 0 1000 400" fixed the issue (for stack snippet I needed to pick smaller numer).

svg foreignobject figure {
    width: 100%;
    height: 100%;
    margin: 0;
}
/* ========================================================================== */
/* Syntax highlighting styles */
/* ========================================================================== */
.highlight .p {  }
.highlight { background: #152032; color: #e9e9e8; padding: 2px 10px; overflow: auto; font-family: monospace; }
.highlight .c { color: #999988; font-style: italic } /* Comment */
.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
.highlight .k { font-weight: bold } /* Keyword */
.highlight .o { font-weight: bold } /* Operator */
.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */
.highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */
.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */
.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
.highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .gr { color: #aa0000 } /* Generic.Error */
.highlight .gh { color: #999999 } /* Generic.Heading */
.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
.highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */
.highlight .go { color: #888888 } /* Generic.Output */
.highlight .gp { color: #555555 } /* Generic.Prompt */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #aaaaaa } /* Generic.Subheading */
.highlight .gt { color: #aa0000 } /* Generic.Traceback */
.highlight .kc { font-weight: bold } /* Keyword.Constant */
.highlight .kd { color: #20A8E4; } /* Keyword.Declaration */
.highlight .kp { font-weight: bold } /* Keyword.Pseudo */
.highlight .kr { font-weight: bold } /* Keyword.Reserved */
.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */
.highlight .m { color: #009999 } /* Literal.Number */
.highlight .s { color: #d14 } /* Literal.String */
.highlight .na { color: #008080 } /* Name.Attribute */
.highlight .nb { color: #0086B3 } /* Name.Builtin */
.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */
.highlight .no { color: #008080 } /* Name.Constant */
.highlight .ni { color: #800080 } /* Name.Entity */
.highlight .ne { color: #ff4242; font-weight: bold } /* Name.Exception */
.highlight .nf { color: #d63535; font-weight: bold } /* Name.Function */
.highlight .nn { color: #b393ff; } /* Name.Namespace */
.highlight .nt { color: #d47329 } /* Name.Tag */
.highlight .nv { color: #008080 } /* Name.Variable */
.highlight .ow { font-weight: bold } /* Operator.Word */
.highlight .w { color: #bbbbbb } /* Text.Whitespace */
.highlight .mf { color: #009999 } /* Literal.Number.Float */
.highlight .mh { color: #009999 } /* Literal.Number.Hex */
.highlight .mi { color: #0DF1D1; } /* Literal.Number.Integer */
.highlight .mo { color: #009999 } /* Literal.Number.Oct */
.highlight .sb { color: #d14 } /* Literal.String.Backtick */
.highlight .sc { color: #d14 } /* Literal.String.Char */
.highlight .sd { color: #d14 } /* Literal.String.Doc */
.highlight .s2 { color: #FF8D00 } /* Literal.String.Double */
.highlight .se { color: #d14 } /* Literal.String.Escape */
.highlight .sh { color: #d14 } /* Literal.String.Heredoc */
.highlight .si { color: #d14 } /* Literal.String.Interpol */
.highlight .sx { color: #d14 } /* Literal.String.Other */
.highlight .sr { color: #009926 } /* Literal.String.Regex */
.highlight .s1 { color: #FF8D00 } /* Literal.String.Single */
.highlight .ss { color: #990073 } /* Literal.String.Symbol */
.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */
.highlight .vc { color: #008080 } /* Name.Variable.Class */
.highlight .vg { color: #008080 } /* Name.Variable.Global */
.highlight .vi { color: #008080 } /* Name.Variable.Instance */
.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */

/* fix for error incss variables */
.highlight .err, .highlight .err + .k {
    background: transparent;
    color: #e9e9e8;
    font-weight: normal;
}
<svg viewBox="0 0 600 400"
     preserveAspectRatio="xMinYMin meet"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:xhtml="http://www.w3.org/1999/xhtml">
    <radialGradient id="rg">
      <stop offset="0" stop-color="black"/>
      <stop offset="1" stop-color="white"/>
    </radialGradient>
    <mask id="myMask">
        <rect x="0" y="0" width="100" height="100" fill="white"/>
        <circle cx="50" cy="50" r="45" fill="url(#rg)"/>
    </mask>
    <foreignobject width="100%" height="100%">
        <body xmlns="http://www.w3.org/1999/xhtml">
            <figure class="highlight">
                <pre><code class="language-php" data-lang="php"><span class="c1">// -----------------------------------------------------------------------------</span>
<span class="c1">// :: class that send messages using Server-sent events</span>
<span class="c1">// -----------------------------------------------------------------------------</span>
<span class="k">class</span> <span class="nc">EventStream</span> <span class="p">{</span>
    <span class="k">function</span> <span class="fm">__construct</span><span class="p">(</span><span class="nv">$name</span><span class="p">)</span> <span class="p">{</span>
        <span class="nb">ob_start</span><span class="p">();</span>
        <span class="nv">$this</span><span class="o">-&gt;</span><span class="na">name</span> <span class="o">=</span> <span class="nv">$name</span><span class="p">;</span>
        <span class="nv">$this</span><span class="o">-&gt;</span><span class="na">id</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
        <span class="nv">$this</span><span class="o">-&gt;</span><span class="na">setup</span><span class="p">();</span>
        <span class="cm">/* start fresh */</span>
        <span class="nb">ob_end_clean</span><span class="p">();</span>
    <span class="p">}</span>
    <span class="c1">// -------------------------------------------------------------------------</span>
    <span class="c1">// :: send Server-sent event</span>
    <span class="c1">// -------------------------------------------------------------------------</span>
    <span class="k">function</span> <span class="nf">send</span><span class="p">(</span><span class="nv">$data</span><span class="p">)</span> <span class="p">{</span>
        <span class="nv">$data</span> <span class="o">=</span> <span class="nb">json_encode</span><span class="p">(</span><span class="nv">$data</span><span class="p">);</span>
        <span class="k">echo</span> <span class="s2">"event: </span><span class="si">{</span><span class="nv">$this</span><span class="o">-&gt;</span><span class="na">name</span><span class="si">}</span><span class="se">\r\n</span><span class="s2">id: </span><span class="si">{</span><span class="nv">$this</span><span class="o">-&gt;</span><span class="na">id</span><span class="si">}</span><span class="se">\r\n</span><span class="s2">data: </span><span class="si">$data\r\n\r\n</span><span class="s2">"</span><span class="p">;</span>
        <span class="nv">$this</span><span class="o">-&gt;</span><span class="na">id</span><span class="o">++</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="c1">// -------------------------------------------------------------------------</span>
    <span class="c1">// :: function that will make php file stream data it will disable any</span>
    <span class="c1">// :: buffering that may be added by apache, php or nginx proxy</span>
    <span class="c1">// :: ref: tinyurl.com/y8yyr6eq (https://www.jeffgeerling.com/blog)</span>
    <span class="c1">// -------------------------------------------------------------------------</span>
    <span class="k">private</span> <span class="k">function</span> <span class="nf">setup</span><span class="p">()</span> <span class="p">{</span>
        <span class="o">@</span><span class="nb">ini_set</span><span class="p">(</span><span class="s1">'zlib.output_compression'</span><span class="p">,</span><span class="mi">0</span><span class="p">);</span>
        <span class="o">@</span><span class="nb">ini_set</span><span class="p">(</span><span class="s1">'implicit_flush'</span><span class="p">,</span><span class="mi">1</span><span class="p">);</span>
        <span class="o">@</span><span class="nb">ob_end_clean</span><span class="p">();</span>
        <span class="nb">set_time_limit</span><span class="p">(</span><span class="mi">0</span><span class="p">);</span>
        <span class="nb">header</span><span class="p">(</span><span class="s1">'Content-type: text/event-stream; charset=utf-8'</span><span class="p">);</span>
        <span class="nb">header</span><span class="p">(</span><span class="s2">"Cache-Control: no-cache, must-revalidate"</span><span class="p">);</span>
        <span class="c1">// Setting this header instructs Nginx to disable fastcgi_buffering</span>
        <span class="c1">// and disable</span>
        <span class="c1">// gzip for this request.</span>
        <span class="nb">header</span><span class="p">(</span><span class="s1">'X-Accel-Buffering: no'</span><span class="p">);</span>
    <span class="p">}</span>
<span class="p">}</span></code></pre>
            </figure>
        </body>
    </foreignobject>
</svg>

Upvotes: 1

Related Questions