lohacorporate.blogg.se - Font color boxy svg

Font color boxy svg update#

The above example states that if the renderer has a local font available named "Super Sans Bold", it should use this instead.įollowing is a element. You can point to external sources for font declarations by means of its children and. Its child, the element, corresponds to CSS' src descriptor in declarations. All following attributes are rendering instructions for the font layout engine, for example, how much of the glyphs' overall heights are ascenders. The font-weight and font-style attributes have the same purpose as the equivalent descriptors in CSS. In the example above the first and most important to be defined is font-family, the value of which can then be referenced in CSS and SVG font-family properties. It defines basic properties of the final font such as weight, style, etc. The element is the SVG equivalent of the CSS declaration. There are several accompanying attributes that help further define the basic glyph-box layout. The value 1000 sets a reasonable value to work with. The horiz-adv-x attribute determines how wide a character is on average compared to the path definitions of the single glyphs. This bears an id attribute, to enable it to be referenced via a URI (see below). This implementation can be seen live in Wildbit’s Good & Bad section or as a CodePen.We start with the element. Considering the outlines are the same color as backgrounds, it’s hard to even say that they are there, but the text is much easier to read. That’s it! The text now scales based on media queries just as any other title in the project, only with nice outlines. Window.addEventListener('resize', svgTitles) Window.addEventListener('DOMContentLoaded', svgTitles)

Var svgs = document.querySelectorAll('svg')

Font color boxy svg update#

Wish I could avoid this, but I had to add a few lines of JS to update the viewBox value based on the size of the element: function resizeTitle (el) `) I could easily scale it as an image, but I’d rather keep the font size consistent with other titles and media queries in the projects. The only problem is that SVG has a fixed size (see viewBox) and doesn’t scale well.

The font is inherited from h1 and specified in CSS as well.Īll of that together adds a nice stoke to the text (made darker for the demo):.

Stroke color is specified in CSS using stroke property.

Without this property, the text would be rendered outside of the box. dominant-baseline="hanging" renders text from the top instead of from the baseline, so it fills the whole block.

SVG’s height is set to match the line-height in CSS, and text is placed at omitted y="0".

x="500" (middle of viewBox) and text-anchor="middle" align text to the horizontal center of the block.

Because half of the stroke is hidden behind the text, the value of stroke-width is twice bigger than it should be.

This is very important! SVG still only supports center stroke alignment, but this is a nice way to imitate an “outside” stroke alignment.

paint-order="stroke" keeps the stroke behind the text.

SVG acts as a wrapper on a title text, just to provide more styling properties: Some parts weren’t very obvious, so I decided to document my solution in case it helps someone else. After some experimentation, I solved this with a mix of SVG, CSS, and JS.