embed-svg.html

<!DOCTYPE html><html lang="en"><head>
<title>Embedding SVG in HTML</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="code-c.css" rel="stylesheet" type="text/css" />
<script src="js/code-a.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="layout">
<div id="hdr01"></div>
<a id="mylinkhome" href="/"><span>CSS4J</span></a>
</div>
<div class="container">
<div class="menu">
<ul class="menulist">
<li><a id="mnuindice" href="/"><span>Home</span></a></li>
<li><a id="mnuusage" href="usage.html"><span>Usage</span></a></li>
<li class="menulvl2"><div id="mnuembedsvg-sel"><span>Embed SVG</span></div></li>
<li class="menulvl2"><a id="mnuresolver" href="resolver.html"><span>Resolver</span></a></li>
<li><a id="mnuapi2" href="api/latest/"><span>Latest API</span></a></li>
<li><a id="mnufaq" href="faq.html"><span>FAQ</span></a></li>
<li><a id="mnubenchmarks" href="benchmarks.html"><span>Benchmarks</span></a></li>
<li><a id="mnugithub" href="https://github.com/css4j"><span>Github</span></a></li>
</ul>
</div>
<div class="beforemain"></div>
<div class="main">
<div id="presentacion_top" class="textheader"><span>Embed SVG</span></div>
<div class="cos">
<h1>Embedding SVG in HTML documents</h1>
<div class="tema" id="overview">
<h2>Overview</h2>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/SVG">SVG images</a> can be used as stand-alone files, but the
most efficient way to include them in an HTML document is by embedding them as <code>&lt;svg&gt;</code> subtrees.
However, this may cause unexpected problems due to two factors:</p>
<ul>
<li>Element IDs that were unique in the SVG image and the main document may collide, causing the HTML to become non-conformant
due to the presence of two (or more) <a href="https://html.spec.whatwg.org/multipage/introduction.html#restrictions-on-content-models-and-on-attribute-values:the-id-attribute">elements with the same ID</a>.</li>
<li>The way that <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style"><code>STYLE</code></a> elements are handled in HTML documents may cause further collisions (see below).</li>
</ul>
<p>The <code>STYLE</code> elements contained inside the hierarchy of the <code>SVG</code> elements are used for the
computation of the styles of the whole document. That is, the rules located in a style sheet that was written for a
specific SVG image are accounted like if the <code>STYLE</code> was located at the <code>HEAD</code> element (but applying
the CSS precedence rules).</p>
<p>Due to that, there could be a collision between IDs and class names in the CSS from the SVG image(s) and the main document,
or among the embedded SVG images.</p> 
</div>
<div class="tema" id="visitor">
<h2>Using the visitor pattern to replace identifiers</h2>
<p>Fortunately, the css4j library provides the necessary tools to visit the CSS rules and make the necessary checks and
modifications to the relevant selectors. You can use your favourite DOM implementation to check and modify duplicate <code>id</code>
attributes (if you use css4j's <a href="api/latest/io.sf.carte.css4j/io/sf/carte/doc/dom/package-summary.html">native DOM</a>,
a <a class="codeitem" href="api/latest/io.sf.carte.css4j/io/sf/carte/doc/dom/NodeIterator.html">NodeIterator</a>
could be a good choice), but the changes must be consistent with what you apply on the selectors.</p>
<p>For example, the
<a class="codeitem" href="api/latest/io.sf.carte.css4j/io/sf/carte/doc/style/css/parser/AttributeConditionVisitor.html">AttributeConditionVisitor</a>
class can be of help for the task. Let us subclass it to provide our own logic:</p>
<pre class="code"><code class="language-java">package com.example;

import io.sf.carte.doc.style.css.nsac.AttributeCondition;
import io.sf.carte.doc.style.css.nsac.Condition.ConditionType;
import io.sf.carte.doc.style.css.parser.AttributeConditionVisitor;

class DupeConditionVisitor extends AttributeConditionVisitor {

    @Override
    public void visit(AttributeCondition condition) {
        ConditionType type = condition.getConditionType();
        if (type == ConditionType.ID || type == ConditionType.CLASS) {
            String currentName = condition.getValue();
            if (isBadName(currentName)) {
                String newName = getNewName(currentName);
                setConditionValue(condition, newName);
            }
        }
    }

    private boolean isBadName(String name) {
        // Your logic comes here
        ...
    }

    private String getNewName(String oldName) {
        // Your logic comes here
        ...
    }

}
</code></pre>
<p>As you can see, for each visit it is checked whether the selector condition is an ID or class,
and in that case checks for the name (for which you need to provide your own logic).</p>
<p>Your visitor based on the above code is now prepared to perform the task, but first you need to find the
right CSS rules to apply it, for which we will use another visitor. You could use the <a class="codeitem"
href="api/latest/io.sf.carte.css4j/io/sf/carte/doc/style/css/util/AttrStyleRuleVisitor.html">AttrStyleRuleVisitor</a>
convenience class for this. Let's see an excerpt of what it does, adapted from <a
href="https://github.com/css4j/css4j/blob/bedd7b3d59e7551069546f5ced57ef7c6bc610bb/src/io/sf/carte/doc/style/css/util/AttrStyleRuleVisitor.java">its source</a>:</p>
<pre class="code"><code class="language-java">package io.sf.carte.doc.style.css.util;

import io.sf.carte.doc.style.css.CSSStyleRule;
import io.sf.carte.doc.style.css.nsac.SelectorList;
import io.sf.carte.doc.style.css.om.AbstractCSSStyleSheet;
import io.sf.carte.doc.style.css.parser.AttributeConditionVisitor;
import io.sf.carte.util.Visitor;

public class AttrStyleRuleVisitor implements Visitor&lt;CSSStyleRule&gt; {

    private final AttributeConditionVisitor visitor;

    public AttrStyleRuleVisitor(AttributeConditionVisitor visitor) {
        super();
        this.visitor = visitor;
    }

    @Override
    public void visit(CSSStyleRule rule) {
        SelectorList selist = rule.getSelectorList();
        visitor.visit(selist);
        rule.setSelectorList(selist); // Refresh serialization
    }

}
</code></pre>
<p>As you see, it just accepts the style rule, obtains the selector list and applies the condition visitor to it.</p>
<p>Then you can visit the style sheets by using any of the DOM backends that the library provides.
You could gather identifier information from the main document first, then check with the SVG files that you
want to embed. Or you may prefer to apply a systematic approach with the identifiers declared in the SVG files.</p>
<p>Here is an example that visits the sheets contained by an element, it uses css4j's native DOM (adapted from Carte's
<a class="codeitem" href="https://github.com/css4j/carte/blob/1f685aeefbfd666e3a386ba9d4f701811b102b7a/carte/src/io/sf/carte/report/DocumentStore.java#L235">DocumentStore</a>):</p>
<pre class="code"><code class="language-java">DOMElement svg = ... [the SVG element containing the image]

DupeConditionVisitor dupeVisitor = new DupeConditionVisitor();
Visitor&lt;CSSStyleRule&gt; ruleVisitor = new AttrStyleRuleVisitor(dupeVisitor);
Iterator&lt;DOMElement&gt; styleIt = svg.getElementsByTagNameNS("*", "style").iterator();
while (styleIt.hasNext()) {
    DOMElement style = styleIt.next();
    AbstractCSSStyleSheet sheet = (AbstractCSSStyleSheet) ((LinkStyle&lt;?&gt;) style).getSheet();
    if (sheet != null) {
        sheet.acceptStyleRuleVisitor(ruleVisitor);
        style.normalize(); // Write the result to the inner text node
    }
}
</code></pre>
<p>And now you only need to serialize the resulting document. (To serialize the native DOM, look at the powerful
<a class="codeitem" href="api/latest/io.sf.carte.css4j/io/sf/carte/doc/dom/DOMWriter.html">DOMWriter</a>
or just call <code>toString()</code>).</p>
</div>
<div class="tema" id="examples">
<h2>Examples of embedded SVG</h2>
<p>You may want to look at the CSS4J benchmark pages for <a href="dom-mark.html">examples of pages where SVG
images were embedded</a> in the way described by this document.</p>
</div>
</div>
<div class="footnote">
</div>
</div>
</div>
</body></html>