Font in SVG
Post here questions and problems related to editing and publishing DITA content.
Font in SVG
Hi, the font used in SVG images is being replaced by another font in the HTML generated by WebHelp Responsive 19.1 (2017102417). Interestingly, if you open the image in a separate tab, the correct font is displayed. It appears that the font rendered is inherited but I can't find what's doing it or how to stop it.
Here's the code in the SVG:
Here's the URL to page with the image. Notice that the text alignment is off and the font is wrong.
http://docs.datastax.com/en/dse/5.1/dse ... tive-retry
If you right click the image and open it in a new tab the font is displayed correctly.
I've tried numerous things such defining font in CSS:
When bringing in the image in as an object it renders properly:
but the image is not displayed in oXygen Author.
Why is the font specification being overridden and by what?
Thanks for your help.
Paul
Here's the code in the SVG:
Code: Select all
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,300,700');
.st0{fill:none;stroke:#000000;stroke-width:2;}
.st1{fill:none;stroke:#C42127;stroke-width:2;}
.st2{fill:#C42127;}
.st3{font-family: 'Roboto Condensed', sans-serif; }
...
http://docs.datastax.com/en/dse/5.1/dse ... tive-retry
If you right click the image and open it in a new tab the font is displayed correctly.
I've tried numerous things such defining font in CSS:
Code: Select all
/* Roboto Condensed fonts */
@font-face {
font-family: "Roboto Condensed";
src: url("resources/fonts/roboto-condensed-v16-latin-regular.eot"); /* IE9 Compat Modes */
src: url("resources/fonts/roboto-condensed-v16-latin-regular.eot?#iefix") format('embedded-opentype'), /* IE6-IE8 */
url("resources/fonts/roboto-condensed-v16-latin-regular.woff2") format('woff2'), /* Super Modern Browsers */
url("resources/fonts/roboto-condensed-v16-latin-regular.woff") format('woff'), /* Modern Browsers */
url("resources/fonts/roboto-condensed-v16-latin-regular.ttf") format('truetype'), /* Safari, Android, iOS */
url("resources/fonts/roboto-condensed-v16-latin-regular.svg#RobotoCondensed") format('svg'); /* Legacy iOS */
font-style: normal;
font-weight: normal;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: "Roboto Condensed";
src: url("resources/fonts/roboto-condensed-v16-latin-regular.svg#RobotoCondensed") format("svg");
}
}
img, figure, .image {
font-family: "Roboto Condensed" !important ;
font-style: normal;
font-weight: 300;
font-size: 18px;
}
Code: Select all
<object type="image/svg+xml" data="../images/rapidReadProtection.svg"></object>
Why is the font specification being overridden and by what?
Thanks for your help.
Paul
-
- Posts: 222
- Joined: Tue Jul 01, 2014 11:48 am
Re: Font in SVG
Post by bogdan_cercelaru »
Hello,
When SVG images are referred in DITA topic using in the WebHelp output the SVG file are included with the <img/> element. The SVG images linked in HTML files using the <img/> element, may not be rendered properly when other resources are linked from the SVG file. In this case, the font used in the SVG file is linked using
To avoid this, you could use the following code in your DITA topic to insert the SVG. In this case, the SVG will be correctly displayed in both, WebHelp output and Oxygen Author mode.
Regards,
Bogdan
When SVG images are referred in DITA topic using
Code: Select all
<image href="images/image.svg" />
Code: Select all
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,300,700');
Code: Select all
<svg-container>
<svgref href="images/image.svg"/>
</svg-container>
Regards,
Bogdan
Bogdan Cercelaru
<oXygen/> XML Editor, Schema Editor and XSLT Editor/Debugger
http://www.oxygenxml.com
<oXygen/> XML Editor, Schema Editor and XSLT Editor/Debugger
http://www.oxygenxml.com
Return to “DITA (Editing and Publishing DITA Content)”
Jump to
- Oxygen XML Editor/Author/Developer
- ↳ Feature Request
- ↳ Common Problems
- ↳ DITA (Editing and Publishing DITA Content)
- ↳ SDK-API, Frameworks - Document Types
- ↳ DocBook
- ↳ TEI
- ↳ XHTML
- ↳ Other Issues
- Oxygen XML Web Author
- ↳ Feature Request
- ↳ Common Problems
- Oxygen Content Fusion
- ↳ Feature Request
- ↳ Common Problems
- Oxygen JSON Editor
- ↳ Feature Request
- ↳ Common Problems
- Oxygen PDF Chemistry
- ↳ Feature Request
- ↳ Common Problems
- Oxygen Feedback
- ↳ Feature Request
- ↳ Common Problems
- Oxygen XML WebHelp
- ↳ Feature Request
- ↳ Common Problems
- XML
- ↳ General XML Questions
- ↳ XSLT and FOP
- ↳ XML Schemas
- ↳ XQuery
- NVDL
- ↳ General NVDL Issues
- ↳ oNVDL Related Issues
- XML Services Market
- ↳ Offer a Service