I was testing svg background in our Application and I was woundering if it was possible to USE RawGit to render our Background. In our case it's possible to render a SVG background with RawGit.
// Api to catch out Config File
fetchConfig() {
return this.props.bp.axios.get('/api/config').then(({ data }) => {
let rawGitUrl = data.backgroundImage
let datas = data
this.props.bp.axios.get(rawGitUrl).then(({ data }) => {
let svg = data
datas.backgroundImage = svg
this.setState({
config: datas
})
})
})
}And the second part is our with render SVG
// Convert our Image in base64
const backgroundImageEncodeBase64 = this.props.config.backgroundImage
? btoa(this.props.config.backgroundImage)
: null
/* Code */
<div
className={classNames}
style={{
backgroundColor: this.props.config.backgroundColor,
color: this.props.config.textColorOnBackgound,
background: 'fixed center;',
backgroundImage: `url('data:image/svg+xml;base64,${backgroundImageEncodeBase64}')`
}}
>
/* Code */